Box Shadow Generator
Web & Design
100% in-browser
Design a CSS box-shadow with a live preview and copy the code.
How to use the Box Shadow Generator
- 1 Adjust the horizontal and vertical offset, blur and spread.
- 2 Pick the shadow color and toggle inset.
- 3 Copy the generated box-shadow CSS.
About the Box Shadow Generator
Box shadows add depth to buttons, cards and modals. This generator gives you sliders for every parameter — offset, blur, spread, color and inset — with a live preview so you can dial in the exact look.
It outputs ready-to-paste CSS and runs in your browser.
Frequently asked questions
What does inset do?
Inset draws the shadow inside the element instead of outside.
Can I layer shadows?
This tool makes one shadow; combine multiple by comma-separating the generated values.
Related tools
More from us
