Box Shadow Generator
Build single or layered box shadows with offset, blur, spread, colour and inset controls. Live preview and copyable CSS. Free.
Shadow Layers
.box {
border-radius: 20px;
box-shadow: 0px 10px 25px -5px rgba(109, 94, 252, 0.35);
}Overview
A box shadow takes five values: horizontal offset, vertical offset, blur, spread and colour. The reason most hand-written shadows look cheap is that they use one layer. Real objects cast a tight, dark contact shadow near the surface plus a wider, softer ambient shadow further out.
This generator lets you stack layers, so you can build the two or three shadow approach that design systems use for elevation. Each layer has its own offsets, blur, spread, colour and opacity, and the exported CSS keeps them comma separated in the right order.
Spread is the value people skip, and it is the one that separates a controlled shadow from a muddy one. A large blur alone bleeds the shadow out on every side; pairing it with a negative spread pulls the shape back in so only the soft edge shows, which is how elevation shadows stay crisp under the element instead of haloing it.
Step by step
- 1Start from a preset. Layered Depth shows the two-shadow technique.
- 2Set offset Y first. Shadows almost always fall downward, so X usually stays at zero.
- 3Raise the blur until the edge softens as much as you want.
- 4Use negative spread to pull the shadow in, which keeps it from bleeding past the element.
- 5Add a second layer for a wider, fainter ambient shadow.
- 6Toggle inset on a layer to push the shadow inside the element.
Notes
- Colour matters more than opacity alone. A shadow tinted toward the background colour looks far more natural than pure black.
- Shadows do not affect layout, so they never push neighbouring elements around.
- Very large blur values on many elements can cost paint performance on low-end devices.
- Animating box-shadow directly is expensive, because it repaints every frame. For a hover lift, animate a pseudo-element's opacity or a transform instead, and leave the shadow itself static.
FAQ
What is the difference between blur and spread?
Blur softens the shadow edge outward from its shape. Spread changes the size of the shadow shape itself before any blurring. Negative spread shrinks it, which is how you keep a large blur from spilling out on all sides.
How do I make a shadow appear inside the element?
Toggle inset on the layer. Inset shadows draw inside the border box, which is how pressed buttons and inner glows are made.
Why do professional shadows use several layers?
Because real light produces both a sharp contact shadow and a diffuse ambient one. Stacking a tight dark layer with a wide faint layer reproduces that, and it is why design system shadows look more convincing than a single blurred offset.
What colour should a shadow be?
Rarely pure black. A shadow tinted toward the surface it falls on, or a desaturated version of the element's own colour, reads as real light. Pure black at full opacity is the single most common reason a shadow looks cheap.