How the box-shadow generator works
A CSS box-shadow paints a copy of an element's box behind (or inside) it, then
shifts, scales and blurs that copy to fake the way real objects cast light. This tool exposes
each part of the property as a slider, redraws the live card on every change, and prints clean,
copy-ready CSS underneath. Because shadows are how interfaces communicate elevation,
getting them right is the difference between a flat page and one with believable depth.
The five numbers map directly to what you see. Offset X and Y move the shadow; a small positive Y with no X reads as a light source directly overhead, which is the look most apps use. Blur softens the edge, spread grows or shrinks the footprint before the blur is applied, and the opacity slider sets the alpha of the colour so the background can show through.
A worked example
Suppose you want a card that gently lifts off the page. Set Offset X to 0, Offset Y
to 8px, Blur to 24px, Spread to -4px and opacity to about
12%. The negative spread pulls the shadow in slightly so it stays tucked under the
card instead of leaking out the sides, and the result is:
box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.12);
That single rule is what most "premium" card shadows boil down to: a low alpha, a blur roughly two to three times the vertical offset, and a touch of negative spread.
The five box-shadow parameters
| Parameter | Effect | Good default |
|---|---|---|
| Offset X | Horizontal shift (+ right, - left) | 0 |
| Offset Y | Vertical shift (+ down, - up) | 4px–24px |
| Blur radius | Edge softness (higher is softer) | ~2× the Y offset |
| Spread radius | Grows / shrinks before blur | 0 or slight negative |
| Colour + alpha | Hue and transparency of the shadow | rgba(0,0,0,0.1) |
One tip that instantly improves a design: tint the shadow toward your background's hue rather than reaching for pure black. On a deep navy layout, a dark-blue shadow at low opacity feels cohesive, while flat grey looks pasted on. Toggle inset when you want the shadow drawn inside the box for recessed inputs, switches and wells.