CSS Box Shadow Generator
Adjust offset, blur, spread, color, and opacity with sliders to design a CSS box-shadow, with an instant preview and copy-ready code.
box-shadow: 0px 12px 24px -4px rgba(0, 0, 0, 0.25);Ad space
Frequently asked questions
What does "spread radius" do?+
A positive spread expands the shadow's size beyond the element's box; a negative spread shrinks it, useful for tighter, more subtle shadows.
What's an inset shadow?+
An inward-facing shadow that appears inside the element's edges instead of behind it, useful for pressed-button or recessed-panel effects.
Can I stack multiple shadows?+
Not from this tool directly, but you can copy multiple generated box-shadow values and combine them with commas in your CSS, since box-shadow supports multiple layered shadows.