Box Shadow Generator
Build layered CSS box shadows visually and copy the code.
How it works
- 1Adjust the sliders.
- 2Add layers for softer depth.
- 3Copy the CSS.
Features
- Up to 5 layers.
- Inset shadows.
- Preview on your own colours.
- Private: runs in your browser; nothing is uploaded.
Frequently asked questions
Why use several layers?
Real shadows combine a tight, dark one and a wide, soft one.
Related tools
CSS Gradient GeneratorDesign linear, radial and conic gradients and copy the CSS.Border Radius GeneratorRound corners visually, one or all at once, and copy the CSS shorthand.CSS MinifierMinify CSS to make files smaller and pages faster.Base64 DecoderDecode Base64 (standard or URL-safe) back to text.