Box shadow generator

The one change that makes a shadow convincing is using more than a single layer. A real shadow is dense and tight where the object nearly touches its surface, and soft and wide further out, and no single shadow is both at once. Stacking two or three, a small dark one at low blur under a larger faint one at high blur, is what every design system does. It is also the reason a hand-written single shadow reads as a grey smear rather than as depth. Layers paint in order with the first on top, so the tight dark one belongs at the start of the list.

Spread is the value people skip and it does the most interesting work. It grows or shrinks the shadow before the blur is applied, which makes two useful things possible. A negative spread with a large blur pulls the shadow in tighter than the box and then softens it, giving the halo of genuine contact directly beneath a card. And a shadow with zero blur and a positive spread is not really a shadow at all: it is a ring that follows the border radius, sits outside the element, and takes up no space in the layout, which is why focus rings are so often built this way. The blur value is not a Gaussian standard deviation either; the specification asks for a blur approximating a Gaussian with a deviation of half the stated radius, so a 12px blur fades out over roughly 12px beyond the spread edge rather than 24.

Colour choice matters more than the numbers. Pure black at low alpha looks grey and lifeless, because a real shadow is the absence of a coloured light rather than a wash of neutral ink. Taking the hue of the surface underneath and darkening it, so a slightly blue-black on a cool page, reads as light instead of as dirt. None of that is a CSS feature; it is only what looks right.