CSS Shadow Generator
Build layered box shadows visually, see them on light and dark pages at once, and copy the CSS.
Design a box-shadow by eye instead of by guesswork. Features include:
- Stack up to six layers: several soft layers make the smooth, natural depth of modern interfaces
- Presets to start from: soft, floating, hard, inset and glow
- The shadow previewed on a light and a dark page side by side, since one that works on white often vanishes on dark
- Clean CSS you can copy, without zero values you do not need
- Runs entirely in your browser: nothing is uploaded and nothing is stored
Presets
Layers
Layer 1
Generated CSS