The five values of box-shadow
The generator writes a single shadow in this order: an optional inset keyword, horizontal offset, vertical offset, blur radius, spread radius, then a color. The color is built from your hex choice plus the opacity slider as an rgba() value.
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.2);| Value | Range here | Effect |
|---|---|---|
| Horizontal and vertical | -50 to 50 px | Moves the shadow; positive is right and down |
| Blur | 0 to 100 px | Softness; a blur of 0 is a hard copy of the box. Negative values are invalid in CSS |
| Spread | -50 to 50 px | Grows or shrinks the shadow before blurring |
| Opacity | 0 to 1, in steps of 0.01 | Alpha of the shadow color |
The blur value is the width of the soft edge; in the CSS spec it is the diameter over which a Gaussian blur with a standard deviation of half that number is applied. So a 20 px blur fades out over roughly 20 px centered on the shadow's edge, and about 10 px of it sits inside the shadow's outline.
Why the default has negative spread
With a 10 px vertical offset, a 20 px blur and -5 px spread, the shadow is shrunk by 5 px on each side before blurring. It therefore peeks out mainly beneath the box and barely shows at the sides, which looks like a light source above rather than a glow all around.
Pitfalls specific to shadows
- Clipping. A parent with
overflow: hiddencuts off any shadow that extends beyond it. Add padding to the parent or move the overflow rule inward. - Animation cost. Animating
box-shadowmakes the browser repaint the shadow every frame. For hover effects, put the larger shadow on a pseudo-element and fade itsopacityinstead. - Large blurs on many elements. Long lists of cards each with a 100 px blur can slow scrolling on low-end phones.
- Do not use shadow alone for meaning. In Windows High Contrast and other forced-colors modes, shadows are removed, so a focus ring made only from
box-shadowdisappears. Useoutlinefor focus states. - Layering. This tool produces one layer. Realistic elevation usually stacks two or three shadows separated by commas; paste the output and add layers by hand.
- Inset flips direction. With
insetchecked, the shadow is drawn inside the padding edge, so a positive vertical offset darkens the top, not the bottom.
Pair shadows with rounded corners from the border-radius generator; the shadow follows the box's curve.