CSS Box-Shadow Multi

Multi-layer box-shadow: depth, neon and Material elevations

A single box-shadow rarely looks convincing. Real objects cast more than one shadow — an ambient soft halo plus a sharper, directional shadow under the light source. CSS lets you stack as many shadows as you want by separating them with commas. The syntax is box-shadow: x y blur spread color, x y blur spread color, ..., and the painting order is top to bottom: the first shadow in the list renders on top, the last underneath.

.card {
  box-shadow:
    0 1px  2px  rgba(0,0,0,.08),   /* ambient, tight */
    0 4px  8px  rgba(0,0,0,.06),   /* mid distance */
    0 16px 32px rgba(0,0,0,.04);   /* far, very soft */
}

Material Design elevation

Google's Material Design system precomputes 24 elevation levels (0 to 24 dp), each defined by two stacked shadows — a key shadow (directional, simulates the light direction) and an ambient shadow (soft, omnidirectional). Apple's Human Interface Guidelines and IBM Carbon use similar two-layer stacks. The pattern is universal because it mirrors how real light works.

Smooth shadows and natural depth

Designer Tobias van Schneider popularised the "smooth shadow" technique — six or more shadows with low alpha each, stacked at increasing offsets, blending into a buttery falloff that single shadows can't reach. Tools like shadows.brumm.af generate these stacks. The trick is geometric progression: double the y-offset and blur on each layer while halving (or keeping equal) the alpha, so the cumulative shadow looks natural rather than banded.

Inset, neon and 3D buttons

• Inset — prefix any shadow with the inset keyword to paint it inside the box. Simulates pressed buttons, inner glow or sunken inputs.
• Neon glow — stack 3-4 shadows of the same saturated colour with growing blur (5px, 10px, 20px, 40px) and zero offset for concentric halos.
• 3D button — combine a light shadow above-left with a dark shadow below-right to mimic raised plastic. Reverse on :active for a satisfying press.
• Negative spread — shrinks the shadow inside the element's footprint, useful for sharp edge accents.

Performance and alternatives

Each shadow is an additional paint pass. Six layers on a static card are cheap; six layers on hundreds of list items will tank scroll FPS on mobile, especially with large blur radii (30px+). Two mitigations: promote the element to its own compositor layer with transform: translateZ(0) or will-change: transform, and prefer filter: drop-shadow() for SVG/PNG with transparency (it follows the alpha mask instead of the bounding box). Tailwind ships shadow-sm/md/lg/xl/2xl utilities for the common cases.

FAQ

Are many shadows slow? They are when blur is large and the element scrolls or animates. Profile with DevTools "Rendering > Paint flashing" — green flashes on scroll mean too much repaint.

Should I use box-shadow on SVG icons? No — use filter: drop-shadow() so the shadow follows the actual silhouette and not the rectangular bounding box.

How do I optimise shadow rendering? Force a composited layer (transform: translateZ(0)), reduce blur radius, or cache the shadow into a background-image PNG for static heroes.

Dark mode shadows? Reduce intensity — heavy black shadows on dark backgrounds become muddy. Some designers invert them into subtle white glows to imply elevation by light rather than depth.