All tools › 🎨 Design
Box-shadow generator
Design CSS box shadows visually, with several layers, and copy the CSS.
Presets
Shadow layers
CSS
How it works
Adjust the offset, blur, spread, color and opacity of each shadow with sliders and see the result live. Add up to five layers: real shadows usually combine a tight, darker shadow with a wide, soft one.
Inset shadows are drawn inside the element, for pressed or engraved effects.
Start from a preset and fine-tune it, then copy the box-shadow CSS.