Layered shadows, because real light has two
A tight contact shadow and a broad ambient one, generated together — because a single large blur reads as a smudge.
Layered shadows, because real light has two
A tight contact shadow and a broad ambient one, generated together. A single large blur reads as a smudge.
A shadow implies a light, and the light has to agree with itself
Every shadow on a screen is a claim about where the light is coming from. One card lit from above and another lit from the left do not read as two styles; they read as a mistake, even to someone who could not say what is wrong. The convention is light from above, which is why shadows are almost always offset downward and rarely sideways.
Keeping the offset direction identical everywhere and varying only the distance and blur is what makes elevation legible: a dialog casts the same shape of shadow as a card, only longer and softer, and the difference reads as height rather than as a different design. Once the direction is consistent, elevation becomes a single dimension you can order things along.
Dark mode needs a different answer
Shadows work by darkening what is behind them, and on a background that is already nearly black there is nothing left to darken. A shadow that gave a card definition in light mode becomes invisible in dark mode — not subtle, simply absent — and the interface flattens into one plane.
The usual fix is to stop signalling elevation with shadow and start signalling it with surface lightness: raised things get a slightly lighter background than what they sit on, which is how physical materials behave under ambient light anyway. A faint border does the same job and is more robust still. Whichever you choose, it is a separate decision from the light-mode shadow rather than an adjustment to it, and a theme that only scales its shadow opacity between modes will always look wrong in one of them.
How the layers are built
Distance grows quadratically across the layers, blur linearly, and opacity falls. That combination is what makes a stack read as one soft shadow rather than as several stacked outlines.
The angle rotates the offset. 90° casts straight down, which is the convention because it matches a light source above.
A tinted shadow — the surface colour darkened rather than pure black — usually looks better on a coloured background. Black shadows on a warm surface read as grey smudges.
One shadow is rarely enough
Look at a real object on a real surface: there is a dark, tight shadow where it touches, and a much softer, wider one further out. A single box-shadow can be one or the other, not both.
Stacking two or three with growing blur and falling opacity approximates it closely, and it is why the shadows in well-made design systems are always comma-separated lists.
Shadows are not free
Large blurs are expensive to paint, and a stack of them on a scrolling list is a common cause of jank. Three layers is usually the point of diminishing returns.