CSS Box Shadow Generator
Build CSS box-shadow values visually with live preview. Adjust offset, blur, spread, color and opacity — then copy the ready-to-use CSS.
💻 Developer Tools
Free
Browser-based
Horizontal offset
4px
Vertical offset
4px
Blur radius
12px
Spread radius
0px
Opacity
35%
#000000
box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.35);
CSS box-shadow Syntax
The CSS box-shadow property accepts one or more shadow layers, each defined as:
[inset] offset-x offset-y [blur-radius] [spread-radius] color
Parameter Reference
| Parameter | Range | Effect |
|---|---|---|
| Horizontal offset | Any px value | Positive = right, negative = left |
| Vertical offset | Any px value | Positive = down, negative = up |
| Blur radius | 0 and up (px) | 0 = sharp edge; higher = softer |
| Spread radius | Any px value | Expands (+) or contracts (−) the shadow |
| Color / Opacity | Any CSS color | rgba() lets you control transparency |
| Inset | Boolean | Shadow renders inside the element border |
Tips
For subtle card elevation, keep offsets small (2–4 px), blur at 8–16 px, and opacity at 10–25%. For dramatic depth, increase offsets and blur. A spread of 0 keeps the shadow the same size as the element; negative spread creates a tighter, focused glow.