Box shadow takes five values in a specific order and the difference between blur and spread is not obvious from the syntax alone. This generator gives you sliders and a live preview, plus the ability to layer several shadows — which is how convincing depth is actually built.
Blur softens the shadow edge without changing its size. Spread grows or shrinks the shadow shape before blurring, so a negative spread with a large blur produces a tight, subtle shadow.
Layer two or three. A tight, darker shadow close to the element plus a wide, faint one further out mimics real ambient and direct light far better than one heavy shadow.
For elements that should read as recessed — pressed buttons, input fields, and inset panels. It draws the shadow inside the border box instead of outside it.
Large blur radii on many elements can cost paint time, especially while scrolling. If it becomes a problem, promote the element to its own layer or reduce the blur radius.
All free tools · Blog · About · Contact