Box shadow generator
Build a CSS box-shadow in your browser. Offset, blur, spread, color, optional inset. Nothing is uploaded.
box
Adjust the fields. CSS updates in this tab.
How to use the Box shadow generator
- Set X, Y, blur, and spread in pixels.
- Pick a color (hex or rgba) and optional inset.
- Copy the box-shadow declaration.
Layer one shadow
One shadow is the usual card lift. Stack more shadows in CSS with commas if you need a sharper ring plus a soft drop. Inset draws the shadow inside the box.
Nothing is uploaded
The preview and the CSS stay in the tab.
Box shadow generator FAQ
Units?
Pixels. Convert rem in your stylesheet if the rest of the design uses rem.
Multiple shadows?
Copy once, then append another shadow after a comma.