CSS Box-Shadow Generator
Build realistic CSS box-shadows: generate smooth layered shadows from a single elevation and light direction, or stack your own layers with offset, blur, spread, colour and inset, then copy the CSS or a Tailwind class.
How to Use
- Choose Elevation to get a realistic multi-layer shadow from one height, or Custom to edit each layer yourself.
- In Elevation mode set the height, the number of layers, the softness, the darkness and the direction the light comes from.
- In Custom mode each layer has X and Y offset, blur, spread, colour, opacity and an inset switch. Add as many layers as you like.
- Change the card colour, corner radius and backdrop (light or dark) to see the shadow where it will be used.
- Copy the CSS, or the Tailwind arbitrary class for use straight in markup.
Worked Example
Elevation 12 px, 5 layers, softness 200%, darkness 30%, light from above.
Each layer is twice as far as the one before, ending at the elevation: offsets of 12 × 1/16, 1/8, 1/4, 1/2 and 1 give 0.75, 1.5, 3, 6 and 12 px downwards. Each blur is twice its offset (softness 200%): 1.5, 3, 6, 12 and 24 px. The opacities are chosen so that where all five overlap they add up to exactly 30% darkness, with the close, sharp layers a little darker than the wide ones.
Together they make a shadow that is crisp and dark where the card nearly touches the page and fades softly 36 px out (12 px offset + 24 px blur) — the “Reach” readout — which is why layered shadows look so much more physical than a single 0 12px 24px.
Show Work
Formulas
From Drop Shadows to Elevation
CSS box-shadow arrived with CSS3 and was supported unprefixed in every major browser by 2011, replacing shadow images sliced into tables. The skeuomorphic designs of that era used heavy single shadows; the flat design wave around 2013 removed them almost entirely.
Google’s Material Design (2014) brought them back as information: a surface’s shadow tells you how high it sits, from 1 dp for a card to 24 dp for a dialog, each built from several shadows for a key and an ambient light. Designers such as Tobias Ahlin later showed that stacking more layers, each doubling the last, produces even smoother, more natural shadows — the method used by Elevation mode here.
About This Tool
This tool builds box-shadows two ways: Elevation mode turns a height, layer count, softness, darkness and light direction into a smooth stack of doubling layers; Custom mode lets you edit any number of layers by hand, with offsets, blur, spread, colour, opacity and inset. “Edit these layers” turns an elevation into custom layers you can fine-tune.
The preview card’s colour, radius and backdrop can be changed, the readouts show how far the shadow reaches past the box, and the result copies as CSS, a CSS variable or a Tailwind arbitrary class. Everything runs in your browser.
Related tools: CSS Gradient Generator, CSS Pattern Generator, and Contrast Checker.
Frequently Asked Questions
What do the four shadow numbers mean?
In order: horizontal offset (X), vertical offset (Y), blur radius and spread. X and Y move the shadow; blur softens its edge; spread grows or shrinks the shadow before it is blurred. A positive Y with some blur is the classic light-from-above drop shadow.
Why are layered shadows more realistic?
A real object casts a small dark shadow right where it is close to the surface and a much larger, fainter one spreading out around it. One CSS shadow can only do one of those. Stacking several — each twice as far and twice as blurred as the last, each faint — adds up to the soft, natural falloff that Elevation mode builds automatically.
What does inset do?
An inset shadow is drawn inside the element instead of outside it, as if the surface were carved in. It makes a button look pressed, an input look recessed or a panel look like a well.
Should shadows be pure black?
Usually not. Pure black at high opacity looks harsh. Low opacity (each layer 5–15%) and a colour tinted toward the background, such as a dark navy on a blue page, look more natural. On dark backgrounds shadows barely show, so designers raise the surface colour slightly instead.
Do many layers slow a page down?
Each shadow is painted separately, so very large blurs on many elements can cost painting time, especially while animating. Four to six layers on a handful of cards is fine on any modern device. Avoid animating box-shadow directly; animate opacity of a pseudo-element that holds the shadow instead.
How do I use the CSS Box-Shadow Generator?
Simply pick your options and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
Cards and modals
An elevation of 12 px with 5 layers lifts a card off the page with a soft, natural edge.
Buttons
A 2-layer shadow for the resting state and an inset shadow for the pressed state make buttons feel tactile.
Neon and glow
Two zero-offset coloured layers, blur 8 and 22 px, make a border or badge glow.
Design tokens
Generate elevations 2, 8 and 24 as --shadow-sm, --shadow-md and --shadow-lg so every component lifts consistently.
Last updated: