CSS Box Shadow Generator
Adjust sliders to design a CSS box-shadow visually, with live preview and instant code.
How to Use
- Adjust the offset, blur, spread, and color sliders.
- Toggle "inset" for an inner shadow effect.
- Click "Add Shadow" to stack multiple shadows on one element.
- Copy the generated box-shadow CSS property.
Frequently Asked Questions
QWhat does "spread" do?
Spread expands or contracts the shadow's size beyond the element's box before the blur is applied. Positive values grow the shadow, negative values shrink it.
QCan I add more than one shadow?
Yes — CSS box-shadow supports comma-separated multiple shadows, which this tool lets you stack and preview together.
QWhat is an inset shadow?
An inset shadow renders inside the element's border instead of outside, creating a "pressed in" or recessed look.
About This Tool
The CSS box-shadow property accepts offset-x, offset-y, blur-radius, spread-radius, and color, with an optional inset keyword. Multiple shadows are layered by separating them with commas.