FREE TOOL
Box-shadow generator
Stack shadow layers, fine-tune them with sliders and copy the CSS.
Presets
WHAT IT DOES
About this tool
Design CSS shadows visually with several layers, spread, blur, color, opacity and inset. Includes presets for soft, layered and raised shadows.
Everything runs right in your browser: your text and files are never uploaded or stored.
QUESTIONS
Frequently asked questions
Why use more than one shadow layer?
Real shadows are soft close to an object and fade further away. Stacking two or three shadows with more blur and less opacity each time looks far more natural than a single large, blurry shadow.
What do spread and inset do?
Spread makes the shadow bigger or smaller before the blur is applied; a negative spread keeps a large blur tucked tightly under the element. An inset shadow is drawn inside the box, so it looks pressed in.
Do shadows slow down a page?
A few static shadows are perfectly fine. Animating large, heavily blurred shadows can make scrolling choppy on low-end phones. Animate the opacity of a layer that carries the shadow instead.
06 / LET'S GET ACQUAINTED
TELL US
WHAT YOUR
BUSINESS NEEDS
Describe the task. Together we'll
work out the next step.