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);
}About the box shadow generator
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.
How to use it
- 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.
Worth knowing
- 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.
Questions
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.