CSS Box Shadow Generator
Design soft, layered CSS box shadows with a live preview: offset, blur, spread, colour and inset, then copy the CSS. Free online generator.
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06),
0px 12px 32px -8px rgba(30, 27, 75, 0.22);
border-radius: 16px;Ad space · responsive
How to use CSS Box Shadow Generator
- Adjust the offset, blur, spread, colour and opacity of each layer.
- Add a second soft layer for a more natural shadow.
- Copy the CSS.
Good to know
- Runs in your browser; nothing is uploaded.
Privacy
Runs entirely in your browser. Nothing you enter or open here is uploaded.
Questions
Why two layers?
Real shadows have a sharp part close to the object and a soft part further away. Two layers look far more natural than one.