Why Layering Multiple Box-Shadows Creates Smoother, More Realistic Depth

Why a Single Shadow Looks Flat

A single box-shadow, no matter how carefully tuned, tends to look like a uniform gray blob rather than a convincing shadow — because real-world shadows aren't uniform. Light scatters and softens differently at different distances from the object casting it, something one flat shadow value simply can't express.

The Layering Technique

box-shadow accepts a comma-separated list of multiple shadow definitions, all rendered together — the first one listed sits on top, with each subsequent one layered behind it. Stacking several shadows with gradually increasing offset and blur, while decreasing opacity, mimics how light actually scatters outward from an object.

.card {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.30),
    0 4px 8px rgba(0,0,0,0.25),
    0 16px 32px rgba(0,0,0,0.20);
}

How Material Design Formalized This

Google's Material Design elevation system builds each shadow from exactly three layers with specific names: an umbra (the darkest, tightest contact shadow, closest to the object), a penumbra (a mid-range softer shadow), and an ambient shadow (the widest, faintest layer, representing scattered ambient light). Combining these three consistently across a design system produces a coherent, physically plausible sense of elevation at every level.

How Many Layers Is Enough

Two to three layers is generally sufficient to read as convincingly soft and realistic — beyond that, the visual difference becomes hard to perceive, while the rendering cost keeps climbing, since each additional layer is an entirely separate shadow the browser has to compute and paint.