Developer Tools ›
CSS Box Shadow Generator
Design a CSS box shadow with live preview. Adjust offsets, blur, spread, and color, then copy the CSS.
Private - runs in your browser
No signup required
Free forever
How to use CSS Box Shadow Generator
- Move the sliders.
- Watch the preview update.
- Copy the CSS one-liner.
Features
- X/Y offset, blur, spread
- Color & opacity
- Inset toggle
Why use it
- Match designs precisely
- Tweak quickly
Frequently asked questions
Multiple stacked shadows?
This generates one shadow at a time. To stack, separate them with a comma in your CSS.