Box Shadow Generator
Design CSS box-shadows with live preview and copy the generated code.
0px
10px
20px
0px
20%
CSS
How to use the Box Shadow Generator
-
Adjust the shadow controls.
-
Check the live preview.
-
Copy the box-shadow CSS.
CSS box-shadow generator
Box-shadows create elevation and focus, but the property packs offset, blur, spread, color and inset into one line. This generator lets you tune each value with sliders and a live preview, then copies the exact box-shadow CSS.
Key features
- Offset, blur, spread & color controls
- Inset shadow toggle
- Live preview on a sample element
- Copy the CSS in one click
Frequently asked questions
What is shadow spread?
Spread grows or shrinks the shadow's size before blur is applied — positive values make it larger.
Can I make inset shadows?
Yes — toggle inset to render the shadow inside the element instead of outside.
Can I stack multiple shadows?
This focuses on a single, well-tuned shadow; you can combine outputs by comma-separating them in CSS.