box-shadow: 6px 8px 20px -4px rgba(27,42,78,0.25);Generate CSS box-shadow visually
Drag the sliders to shape a shadow — horizontal and vertical offset, blur, spread and opacity — pick a colour, toggle inset, and watch the preview update live. When it looks right, copy the ready-to-paste box-shadow rule. Everything runs in your browser.
Frequently Asked Questions
What do the four lengths mean?
In order: horizontal offset, vertical offset, blur radius, and spread. Positive offsets push the shadow right and down; blur softens the edge; positive spread grows the shadow, negative shrinks it.
What is an inset shadow?
Inset draws the shadow inside the box instead of behind it, which is handy for pressed buttons, input wells and subtle depth.
Why is the colour shown as rgba()?
So the opacity slider can make the shadow translucent. Your hex colour is combined with the opacity into an rgba() value, which is what looks natural for shadows.
Is my data private?
Yes — the generator is pure client-side JavaScript. Nothing is uploaded or stored.
