Box Shadow Generator
Design CSS box shadows visually, including layered and inset shadows.
box-shadow: 0px 8px 24px -6px rgba(0, 0, 0, 0.18);
About Box Shadow Generator
The box-shadow property is the main tool for suggesting depth on the web, but its four lengths interact in ways that are hard to predict from the numbers alone.
This generator gives you sliders for every value with a live preview, supports multiple stacked layers for realistic soft shadows, and outputs copy-ready CSS.
Frequently asked questions
What do the four lengths mean?
In order: horizontal offset, vertical offset, blur radius and spread radius. Offsets move the shadow, blur softens the edge and spread grows or shrinks it.
How do I make a realistic shadow?
Stack two or three layers with increasing blur and decreasing opacity. This tool supports multiple layers for exactly that reason.
What does inset do?
It draws the shadow inside the element instead of outside, which is how you create pressed or recessed effects.