Box shadow generator

The single change that makes a shadow look convincing is using more than one layer. A real shadow is dense and tight near the object and soft and wide further out, and one shadow cannot be both. Two or three: a small dark one at low blur, a larger faint one at high blur: is what every design system does, and it is why a hand-written single shadow tends to look like a grey smudge.

Spread is the value people skip and it is the useful one. It grows or shrinks the shadow before the blur is applied, so a negative spread with a large blur gives the soft halo directly under an element that looks like real contact. And a shadow with zero blur and a positive spread is not a shadow at all. It is a border that does not affect layout, which is a common trick for focus rings.

Opacity matters more than colour. A shadow made from pure black at low alpha looks grey and dead; taking the hue of the background and darkening it — a slightly blue-black on a cool page: reads as light rather than as dirt. Nothing about that is a CSS feature; it is just what looks right.