Box Shadow Generator

Spread is applied before the blur, and it grows every side

The order is fixed: take the border box, move it by the offset, inflate it by the spread, then blur the result. Spread is not "more blur" and it is not "a stronger colour" — it grows the solid shape that the blur is then applied to.

What that decides in practice is how much room the shadow needs outside the element, which is what determines whether a parent with overflow: hidden clips it:

Compare rows two and three: ten pixels of spread added ten pixels on every side, including the ones the offset was pulling away from. That is the asymmetry to remember. Offset moves a shadow and leaves its total size alone; spread grows it in all four directions at once.

Negative spread can hide a shadow completely

Spread goes negative, which shrinks the shape. With an 8px downward offset and no blur, sweeping the spread down:

It disappears exactly when the spread reaches the offset, at -8px — every edge is then at or inside the element, and the element is painted on top. That is the mechanism behind the tight shadows in a lot of interface work: a small positive offset with a negative spread produces a shadow that peeks out of one edge only. It is also why a shadow can vanish when somebody nudges a slider and nobody can work out where it went.

A blur keeps it visible past that point, because the blur reaches outward from wherever the shrunken shape ended up. So the vanishing is specifically about spread against offset, not about the numbers being small.

Two more things the sliders do not hint at

The shadow's corners follow the element's, and the radius grows with the spread — except that a zero radius stays zero:

A square element casts a square shadow however much you spread it, and a negative spread clamps at zero rather than going inside out. The rule matters under a rounded card: a large spread makes the shadow noticeably rounder than the thing casting it, and that mismatch tends to read as a blur artefact rather than as geometry.

And inset puts the offset on the opposite edge. An outer shadow offset downwards falls below the box; an inset one offset downwards appears at the top:

Opposite in every case, and it makes physical sense: an inset shadow is the darkness of a surface pressed away from you, so if the light side moves down then the dark side is the top edge. The consequence is that ticking the inset box with the offsets unchanged moves the shadow diagonally across the element rather than simply turning it inside out.