Stack shadows and adjust each one independently, or start from a preset such as Soft, Layered, Neon, or Long.
Color & CSS
CSS Box Shadow Generator
Shape a shadow with sliders and see it on a box straight away. Stack layers for realistic depth, then copy the CSS.
Shadow layersStack up to 5 for depth
Start from a preset
Preview and CSSAdjust the box and background to match your design
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%);
What it handles
Depth that looks natural.
One hard shadow rarely looks real. Layering a few soft ones, each a little larger and fainter, is how modern interfaces get convincing depth.
Horizontal and vertical offset, blur, spread, color, opacity, and inset, with exact number entry beside every slider.
Set the box and background colors to match your design, because a shadow that works on white can vanish on a dark card.
Frequently asked questions
What is the difference between blur and spread?
Blur softens the shadow's edge. Spread grows or shrinks the shadow before the blur is applied, so a negative spread keeps a shadow tucked under the box.
What does inset do?
It draws the shadow inside the box instead of outside, which makes the surface look pressed in. It is useful for inputs and wells.
Why use several layers?
Real shadows are soft near the object and softer further away. Two or three layers with growing blur and low opacity look far more natural than one heavy shadow.
Do shadows affect performance?
A few are fine. Very large blur radii on many elements, or on elements that animate, can be costly, so keep blur moderate where it matters.