Design tool
Box Shadow Generator
Set the offset, blur, spread, and color, then copy the box-shadow CSS.
Processed in your browser. The text is not sent to our servers.
How to build a box shadow
- Enter x, y, blur, and spread. Example: 0 8 24 0.
- Set the color, and turn on inset if the shadow sits inside the box.
- Click Build shadow, check the preview, and copy the CSS.
The output is a box-shadow property. Spread can be left off and defaults to 0.
Frequently asked questions
What units are used?
The four numbers are pixels, in the order offset-x, offset-y, blur, and spread.
Is the CSS uploaded?
No. The preview and the property are created in your browser.