What each value actually controls#
Offset X and Y move the shadow away from the element — positive X moves it right, positive Y moves it down, and both accept negative values to shift left or up. Blur radius controls how soft the shadow's edge is; zero produces a hard-edged silhouette, larger values spread it into a soft gradient. Spread radius grows or shrinks the shadow's shape before the blur is applied — a positive spread makes the shadow larger than the element itself, negative makes it smaller.
Why real shadows are stacked, not single#
A single box-shadow layer reads as flat and slightly artificial, because real-world shadows are not one uniform blur — they are a combination of a tight, high-contrast shadow close to the surface (contact shadow) and a broader, softer, lower-opacity shadow further out (ambient shadow). Material Design's elevation system and most professional UI shadow presets stack two or more layers for exactly this reason. This tool supports adding as many layers as needed, each with independent values.
Inset: casting the shadow inward#
Adding inset to a box-shadow value flips it from casting outward — as if the element were raised above the page — to casting inward, as if it were pressed into a surface or the interior of an inset frame. This is the technique behind a pressed-button effect, a recessed input field, or a vignette effect inside a card. The offset direction still means the same thing; only whether the shadow appears outside or inside the element's border changes.