CSS Box Shadow Generator
Design soft or dramatic shadows for cards, buttons and UI elements. Adjust every setting, preview it live, and copy ready-to-use CSS.
8px
12px
24px
0px
20%
16px
Quick presets
Live preview
DebTech Preview
The generated shadow uses RGBA color so you can control opacity independently of the color.
How to use the CSS Box Shadow Generator
- Adjust horizontal and vertical offset, blur and spread.
- Choose a shadow color and opacity.
- Enable inset mode if you want the shadow inside the element.
- Copy the generated CSS and apply it to your element.
This tool works locally in your browser. It does not upload your settings or data to a server.