CSS Box Shadow Generator

Blur softens the shadow edge — the radius over which it fades to transparent. Spread expands or contracts the shadow shape itself before blurring (negative spread pulls it in).

Realistic shadows almost always need two: a tight, dark layer near the element + a wider, fainter layer further out. Compare Material Design or Tailwind's default shadows — most of them are multi-layer.

Box shadows look more natural with translucent colors that let the background tint through. rgba() lets you set the alpha directly.

Tailwind splits class strings by whitespace, so arbitrary values use underscores in place of spaces.

Because it is what stops a layered shadow reading as a halo. A blurred shadow spreads outwards in every direction, so with spread at 0 it peeks out above the element as much as below it and the result looks like a glow rather than something sitting on a surface. Pulling the spread negative shrinks the shape before the blur is applied, so the visible softness stays under and just below the element — which is why the default here is 0 8px 24px −4px over 0 2px 6px −2px rather than two plain blurs.

It never affects layout: the shadow is painted outside the border box and adds nothing to the element's width, height, or a parent's scrollable area — unlike a border. It is clipped, though. A parent with overflow: hidden, or a rounded card that crops its children, will cut the shadow off at the edge. If a shadow vanishes on one side only, look for the ancestor doing the clipping rather than adjusting the offsets.