Shadow Generator
Generate box shadows at a glance
Settings
Preview
box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.2);
About this tool
This generator writes the CSS box-shadow property from a few simple settings. Use it to give depth to a card, a button or a modal, or to create a pressed-in look with an inset shadow. The preview shows the result on a white block over a light gray background, and the code underneath follows every change you make.
For each shadow you choose the color, the opacity as a percentage, the horizontal and vertical offset, the blur and the spread, in pixels, plus the Inset option. You can stack up to ten shadows, which the tool combines into a single declaration. The color is converted to rgba() so the opacity is built in. A negative blur, which CSS rejects, is set back to zero.
How to use it
- Under Settings, choose the shadow's Color and Opacity (%).
- Adjust Offset X, Offset Y, Blur and Spread, and check Inset for an inner shadow.
- Click Add Shadow to layer more shadows, up to ten.
- Check the Preview, then click Copy CSS, or Clear to go back to the default shadow.
Frequently asked questions
How is the opacity applied?
The browser color picker cannot handle transparency, so the tool keeps color and opacity separate and then merges them into an rgba() value, for example rgba(0, 0, 0, 0.2) for black at 20% opacity.
Why combine several shadows?
Layering a short, sharp shadow with a wide, soft one gives more natural depth than a single shadow. Shadows are separated by commas in box-shadow, and the first one in the list is painted on top of the others.
Which units does the code use?
Offsets, blur and spread are in pixels. Offsets and spread accept negative values, for example to move the shadow upward or shrink it, while blur is always zero or positive.
Are my shadows sent to a server?
No. The code is computed in your browser with no network request. The list of shadows is only kept in the browser's local storage so you can pick up where you left off on your next visit.