Workspace Files stay on your device
dev · css
Box-Shadow & Border-Radius Generator
Tune offset, blur, spread, colour and inset for one or more layered shadows plus per-corner radii, watch the card update live, and export the exact CSS declaration you see — values in, identical values out.
A little guidance. A better result.
How to use Box-Shadow & Border-Radius Generator
Layered shadows and per-corner radii tuned visually; the exported CSS is exactly what you set.
Prepare your input
Set corner radii and one or more shadow layers.
Use the workspace
Adjust offset, blur, spread, colour and inset.
Check your result
Export CSS and test it on your actual component.
Know the limits
The preview's background and size affect appearance; contrast and clipping need checking in context.
Where does my input go?
This browser tool processes your input on your device. Optional analytics is a separate choice; it is not needed to use the tool. Keep your original until you have checked the result.
Read the privacy details →Made for the work in front of you.Report a problem ↗