Tools · CSS · Box-shadow generator
Box-shadow generator
Build a layered CSS box-shadow with a live preview, then copy the code.
Runs fully in your browser. Nothing is uploaded.
Your file is ready.
Try a different file, or try again.
How it works
Start from a preset, or set a layer's offset, blur, spread, and color yourself.
Add more layers for depth (up to 4 total), or remove any of them.
Copy the finished box-shadow CSS.
Frequently asked questions
Yes, up to four layers. They render in the order you add them, which is also the order CSS applies them, so the first layer sits closest to the element.
Offset-x and offset-y move the shadow. Blur softens its edge. Spread grows or shrinks the shadow before the blur is applied.
It draws the shadow inside the element's border instead of outside, for a pressed-in look.
No. Everything happens in your browser, and nothing is sent anywhere.
Comments