CSS Box Shadow Generator
Soft, realistic shadows visually.
- 100% free
- No sign-up
- Runs in your browser
Shadows that look natural
The best UI shadows are subtle: a soft blur, a slight downward offset and a little negative spread. Tune each value with sliders and see the result on a live card.
Copy the CSS, including the matching border-radius.
- 1
Adjust sliders
Offset, blur, spread, opacity.
- 2
Pick a colour
Tinted shadows look richer.
- 3
Copy the CSS
One line to paste.
Frequently asked questions
Why use a negative spread?
It tucks the shadow under the element so it reads as soft depth rather than an outline.
Do shadows hurt performance?
Static shadows are cheap. Avoid animating large blur values on many elements at once.
Is my data uploaded anywhere?
No. Everything runs in your browser with JavaScript — nothing you type or open is sent to our servers.