Box Shadow Generator
Stack one or more shadow layers and copy the resulting CSS.
Last updated
How to make a CSS box shadow
- Adjust the shadow’s offset, blur, spread, colour and opacity, and tick inset for an inner shadow.
- Click Add layer to stack more shadows.
- Click Copy CSS and paste it into your stylesheet.
About this tool
Each layer maps directly to one comma-separated entry in a CSS box-shadow value: horizontal and vertical offset, blur radius, spread radius, a colour with its own opacity, and whether it's an inset (inner) shadow. Stack multiple layers — a soft, spread-out shadow underneath a tighter, darker one is a common way to fake more realistic depth than a single shadow can produce.
Nothing you build here is sent to a server; the entire tool runs as JavaScript in your browser tab.
Questions about box shadows
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius and colour, for example 0 4px 12px 0 rgba(0,0,0,.15). Add inset at the start for an inner shadow.
How do I make a shadow look realistic?
Layer a soft, wide, faint shadow with a tighter, slightly darker one. Real shadows are rarely a single hard edge.
What is the difference between blur and spread?
Blur softens the edge; spread makes the whole shadow bigger (or smaller, if negative) before it’s blurred.
Does box-shadow slow pages down?
Not noticeably for normal use. Very large blurs animated on many elements can, so animate opacity or transform instead.