Tools · CSS · Box-shadow generator
Box-shadow generator
Build a layered CSS box-shadow with a live preview, then copy the code.
Add a file and run the tool.
Your file is ready.
Try a different file, or try again.
Settings
Adjust the settings below. The result updates as you go.
Runs fully in your browser. Nothing is uploaded.
Runs fully in your browser. Nothing is uploaded.
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.
Guides
A closer look at specific problems this tool solves.
Why One Flat Shadow Looks Fake, and Layered Ones Don't
A single box-shadow value usually reads as a sticker glued behind the element, not an object lifted off the page. Real light casts two different kinds of shadow at once, and CSS can only fake that with more than one layer.
Read the guideHow to Build a Layered CSS Box-Shadow
The exact steps for building a real, comma-separated box-shadow value with more than one layer, plus the two settings people get backwards: spread versus blur, and inset versus outer.
Read the guideInset vs. Drop Shadow: Which One Your Design Actually Needs
The same four numbers - offset, blur, spread, opacity - mean opposite things depending on one checkbox. Here's how to tell which direction a given piece of UI actually calls for.
Read the guide
Comments