Box Shadow Generator
Build a CSS box-shadow visually with offsets, blur, spread, color, and inset controls.
Use positive or negative offsets to move the shadow. Blur must be 0 or more.
Result will appear here.
| Setting | Value |
|---|
Privacy: shadow generation runs locally in your browser. No values are stored or transmitted.
How it works
Adjust the box-shadow values, preview the result on a sample card, and copy the CSS property when the look is right.
Examples
- Create a soft card shadow for UI panels
- Generate an inset shadow for recessed elements
- Experiment with blur and spread before copying CSS
FAQ
- What does this box shadow generator do?
It generates a CSS box-shadow value based on horizontal offset, vertical offset, blur, spread, color, and inset settings.
- Can I preview the shadow live?
Yes. The tool includes a live preview box so you can see the shadow before copying the CSS.
- Does it support inset shadows?
Yes. You can toggle inset mode to generate inner shadows.
- Is any design data stored?
No. Everything runs locally in your browser and no values are stored or transmitted.