Why Real Shadows Use Several Layers
A box-shadow takes an X offset, a Y offset, a blur radius, an optional spread and a colour, and the inset keyword moves the shadow inside the element. A single layer tends to look flat because real light produces both a tight contact shadow and a wider ambient one. Stacking comma-separated layers, usually a small dark one over a larger soft one, is what design systems do to suggest elevation. This generator edits each layer independently and previews the combined result.
How to Build a Shadow
- 1Pick box-shadow for elements or text-shadow for type. The spread and inset controls disappear for text because CSS does not support them there.
- 2Adjust offset, blur, spread and colour for the first layer and watch the preview update.
- 3Add a second, larger and softer layer to create depth rather than a single flat drop.
- 4Try an elevation preset to start from a balanced two-layer ramp, then fine-tune it.
- 5Copy the generated declaration into your stylesheet or component.
Common Shadow Tasks
Card and modal elevation
Produce a layered shadow that separates a surface from the page without a heavy dark band.
Inset fields and wells
Use the inset keyword to make inputs and grooves look recessed instead of raised.
Readable text over images
Add a subtle text-shadow so headings stay legible on a photographic background.
Match an existing design system
Reproduce a shadow from a spec by editing each layer until the preview matches, then copy the exact value.
Frequently asked questions
What is the difference between blur and spread?
Blur softens the shadow's edge over the given distance, while spread grows or shrinks the shadow's shape before blurring. A negative spread pulls the shadow in, which is how you keep a large soft shadow from leaking out past the sides of an element.
Why does my single shadow look artificial?
Real elevation has two components: a small, darker contact shadow close to the object and a larger, lighter ambient one. Using one layer with a large blur produces a grey haze instead. Stack two layers with different offsets and opacities.
Does text-shadow support inset or spread?
No. text-shadow accepts only offset X, offset Y, blur and colour. This tool hides those controls in text mode and omits the values from the generated CSS rather than emitting a declaration browsers would ignore.
Are large blurred shadows expensive to render?
They can be. Very large blur radii on elements that animate or scroll force the browser to repaint a big area. If you see jank, reduce the blur, avoid animating the shadow itself, or animate opacity on a pseudo-element instead.