Live
CSS Gradient Generator
Pair your shadow with a background gradient.
Web · Free tool
CSS Shadow Generator
Tune offset, blur, spread, and color and watch the shadow on a real box — then copy one ready-to-paste box-shadow line.
Design a box-shadow
Live preview
How it works
How box-shadow works
Offsets place it
Offset-x and offset-y position the shadow relative to the box. Together they decide whether the shadow reads as a light from above-left or from below-right.
Blur and spread shape it
Blur softens the edge (0 is a hard cut). Spread inflates or shrinks the shadow before blur is applied, letting you dial in anything from a crisp ring to a wide, soft glow.
Inset changes direction
With inset, the shadow is cast inside the element — the staple of recessed panels and pressed buttons. Flipping it on/off is instant in the live preview.
Questions
Box shadow FAQ
How do offset-x and offset-y work?
They shift the shadow horizontally and vertically. Positive x is right, positive y is down; negatives go left and up. Offset plus blur is the 90% case (offset 0 blur 0 is the rare hard-edge shadow).
What does the spread value do?
Positive spread makes the shadow larger, negative makes it smaller, before blurring. Negative spread with a soft blur is the trick behind a subtle recessed look.
What does inset do?
It draws the shadow inside the box instead of behind it — the classic pressed / well / recessed-panel effect you see in form inputs.