CSS Box Shadow Generator
This box shadow generator builds a shadow visually, with as many layers as you want. Layering is what separates a convincing shadow from a flat grey blur: real depth comes from a tight, darker shadow close to the element for contact, plus a wider, softer one for ambient light, and often a third for distance. Every design system that looks good does this. Inset shadows draw inside the element rather than outside, which is how pressed buttons, inset fields and inner glows are made. The preview sits on a checkerboard so you can see exactly how transparent the shadow is at the edges.
How it works
Builds a box-shadow visually, with as many layers as you want. Real depth comes from stacking two or three shadows rather than one large blur: a tight, dark shadow for contact and a wide, soft one for ambient light.
Inset shadows draw inside the element instead of outside, which is how pressed buttons and inner glows are made.
Everything runs in your browser — nothing you enter is sent to a server.
The four values, in order
box-shadow: <x> <y> <blur> <spread> <colour>;- x and y — how far the shadow is offset. A positive y puts it below, as if lit from above.
- blur — how soft the edge is. Zero gives a hard-edged copy of the shape.
- spread — grows or shrinks the shadow before blurring. Negative values are underused and very useful.
- colour — almost always partly transparent.
Why layering works
A single shadow models a single light source with a hard edge, which is not how anything looks in reality. Real shadows have a dark core close to the object and a soft ambient falloff further out.
Two or three layers reproduces that:
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.16),
0 8px 24px -6px rgba(15, 23, 42, 0.18);Colour, not grey
Pure grey shadows look muddy against a coloured background. Tinting the shadow towards the background hue — a cool blue-grey on a white page — reads as far more natural.
Frequently asked questions
How do I use multiple shadows?
Add a layer for each. They are drawn in order with the first on top, and separated by commas in the CSS — which is what real depth is built from.
What does spread do?
It grows or shrinks the shadow before blurring. A negative spread pulls the shadow in, which is how you get a soft shadow that does not peek out around the top edge.
What is an inset shadow?
One drawn inside the element rather than outside. It is how pressed buttons, inset input fields and inner glows are made.
Why do my shadows look flat and grey?
Usually one large blur with a mid-grey colour. Try two layers — a tight dark one at low opacity for contact, and a wide soft one — and use a colour tinted towards your background rather than pure grey.
Do shadows affect layout?
No. A box-shadow is painted outside the element box and takes up no space, so it never pushes anything around. That also means it can overflow a container with hidden overflow and be clipped.
Is anything uploaded?
No. Everything runs in your browser.
Related tools
CSS Border Radius Generator
This border radius generator sets each corner and writes the shortest valid CSS.
CSS Gradient Generator
This gradient generator builds linear, radial and conic gradients with a live preview.
Glassmorphism CSS Generator
This generator builds the frosted-glass effect with backdrop blur and a live preview.