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.
How Box Shadow Generator works in your browser
Each shadow layer is built from horizontal offset, vertical offset, blur radius, spread radius, colour and an optional inset flag, and the preview applies the resulting box-shadow declaration to a live element. Multiple layers are joined with commas in the order they are drawn.
Realistic shadows usually need two or three layers with increasing blur and decreasing opacity, which is why layering is built in rather than bolted on.
When to use it
- Designing a soft, layered card shadow for a UI component.
- Creating a pressed or recessed effect with an inset shadow.
- Matching a shadow from a design file by adjusting values until the preview agrees.
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.