Multiple Box Shadows in CSS — Layer Shadows for Depth Effects

Multiple box shadows stack visually to create depth that a single shadow cannot. Comma-separate values to layer them — first value renders on top.

Generate box shadows visually with the Box Shadow Generator.

Syntax: multiple shadows

/* Syntax: offset-x offset-y blur-radius spread-radius color */
.element {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),  /* tight near shadow */
    0 2px 4px rgba(0, 0, 0, 0.07),  /* medium shadow */
    0 4px 8px rgba(0, 0, 0, 0.07),  /* far shadow */
    0 8px 16px rgba(0, 0, 0, 0.07); /* ambient shadow */
}

Layering small shadows with low opacity looks more natural than one large shadow.

Realistic depth: the Tailwind approach

/* Tailwind-inspired shadow stack (approximated) */

/* shadow-sm */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* shadow (default) */
.shadow {
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* shadow-md */
.shadow-md {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* shadow-xl */
.shadow-xl {
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
}

Material Design elevation

Material Design uses layered shadows at specific elevations:

/* Material Design elevation levels */
.elevation-1 {
  box-shadow:
    0 1px 1px 0 rgba(0,0,0,0.14),
    0 2px 1px -1px rgba(0,0,0,0.12),
    0 1px 3px 0 rgba(0,0,0,0.20);
}

.elevation-4 {
  box-shadow:
    0 2px 4px -1px rgba(0,0,0,0.20),
    0 4px 5px 0 rgba(0,0,0,0.14),
    0 1px 10px 0 rgba(0,0,0,0.12);
}

.elevation-8 {
  box-shadow:
    0 5px 5px -3px rgba(0,0,0,0.20),
    0 8px 10px 1px rgba(0,0,0,0.14),
    0 3px 14px 2px rgba(0,0,0,0.12);
}

/* Hover: increase elevation */
.card {
  box-shadow: /* elevation-2 */
    0 1px 5px 0 rgba(0,0,0,0.12),
    0 2px 2px 0 rgba(0,0,0,0.14),
    0 3px 1px -2px rgba(0,0,0,0.20);
  transition: box-shadow 0.28s ease;
}

.card:hover {
  box-shadow: /* elevation-8 */
    0 5px 5px -3px rgba(0,0,0,0.20),
    0 8px 10px 1px rgba(0,0,0,0.14),
    0 3px 14px 2px rgba(0,0,0,0.12);
}

Neumorphism (soft UI)

Neumorphism uses two shadows — one light, one dark — to create an extruded look:

/* Neumorphic card (light background required) */
.neumorphic {
  background: #e0e5ec;
  border-radius: 16px;
  box-shadow:
    6px 6px 12px #b8bec7,   /* dark shadow: bottom-right */
    -6px -6px 12px #ffffff; /* light shadow: top-left */
}

/* Pressed/inset state */
.neumorphic:active,
.neumorphic.pressed {
  box-shadow:
    inset 6px 6px 12px #b8bec7,
    inset -6px -6px 12px #ffffff;
}

/* Custom property version (easy color theming) */
.neumorphic {
  --bg: #e0e5ec;
  --shadow-dark: #b8bec7;
  --shadow-light: #ffffff;
  background: var(--bg);
  box-shadow:
    6px 6px 12px var(--shadow-dark),
    -6px -6px 12px var(--shadow-light);
}

Neon glow effects

Combine colored shadows at different blur radii for a neon look:

/* Neon text glow */
.neon-text {
  color: #0ff;
  text-shadow:
    0 0 7px #0ff,
    0 0 10px #0ff,
    0 0 21px #0ff,
    0 0 42px #0bc,
    0 0 82px #0bc,
    0 0 92px #0bc;
}

/* Neon box glow */
.neon-box {
  border: 2px solid #0ff;
  box-shadow:
    0 0 7px #0ff,
    0 0 10px #0ff,
    0 0 21px #0ff,
    inset 0 0 7px #0ff;
}

/* Pulse animation */
@keyframes neon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.neon-box {
  animation: neon-pulse 2s ease-in-out infinite;
}

Outline + shadow combination

Use spread radius 0 for outline-like rings:

/* Focus ring that doesn't shift layout (no outline jitter) */
.button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px white,         /* white gap between border and ring */
    0 0 0 4px #3b82f6,       /* blue focus ring */
    0 4px 12px rgba(0,0,0,0.15); /* natural drop shadow */
}

/* Multiple color rings */
.badge {
  box-shadow:
    0 0 0 2px white,
    0 0 0 4px #3b82f6,
    0 0 0 6px white,
    0 0 0 8px #10b981;
}

Performance note

Box shadows are cheap to animate because browsers handle them on the compositor thread. However, avoid animating blur-radius — it triggers repaint on every frame. Animate opacity instead:

/* ❌ Expensive: blur changes cause repaint */
@keyframes bad-shadow {
  to { box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
}

/* ✅ Overlay opacity trick: pre-render large shadow, fade it */
.card { position: relative; }
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover::after { opacity: 1; }

Related tools

• Box Shadow Generator — create multi-layer shadows visually
• CSS Grid Generator — layout with depth
• Color Picker — pick shadow colors