CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
The first layer paints on top.
0px 10px 25px -5px rgba(0, 242, 254, 0.4)box-shadow: 0px 10px 25px -5px rgba(0, 242, 254, 0.4);Understanding the box-shadow Property
The CSS box-shadow property takes horizontal and vertical offsets, a blur radius, a spread radius, and a color. Positive offsets push the shadow right and down; spread grows or shrinks the shadow; and the inset keyword draws the shadow inside the element for a pressed-in look.
It also takes a comma-separated list, and that is how real depth is drawn. One shadow cannot imitate how light actually falls: a raised surface casts a small, relatively dark contact shadow right beneath it and a wide, faint ambientone spreading further out. Material Design's elevation levels are exactly that pair — which is why the Material 3dp and Material 8dp presets have two layers and look believable, while any single-shadow setting looks like a smudge.
Order is paint order: the first layer in the list is drawn on top, so moving a tight shadow above or below a soft one is the difference between a crisp edge and a muddy one — hence the reorder controls rather than making you retype values. Stack up to eight layers, and the whole stack travels in the URL, so a copied link reproduces the exact shadow. All generated in your browser.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Producing an elevation shadow that matches a design system step.
- Building a layered shadow that reads as depth rather than a hard edge.
- Comparing an inset shadow against an outer one.
- Getting a focus ring using a shadow rather than an outline.
- Tuning spread and blur against a live preview.
How it works in practice
A worked example
A card needs the kind of shadow a design system calls elevation, and one shadow at any setting keeps looking like a smudge.
Layer 1 x 0 y 1 blur 2 spread 0 #0f172a at 24% Layer 2 x 0 y 8 blur 24 spread -4 #0f172a at 16%
box-shadow: 0px 1px 2px 0px rgba(15, 23, 42, 0.24), 0px 8px 24px -4px rgba(15, 23, 42, 0.16);
Two layers doing different jobs. The first is tight, dark and barely offset — a contact shadow, the darkness right where the card meets what is under it. The second is wide, soft and pulled in by a negative spread, which is the ambient light the room would have cast. Together they read as an object above a surface; either one alone reads as a graphic effect, which is why an elevation scale in any design system is built from two or three of these rather than from one shadow with a bigger blur.
The edge case that catches people
Order decides what you see, and it is the reverse of what most people assume. A comma-separated list paints front to back — the first layer sits on top of the second — so putting the wide soft one first lets it wash over the tight dark one and the contact shadow disappears into it. The values are identical, the declaration is valid, and the result is flat. If a layered shadow looks like it lost a layer, swap the order before touching a single number.
When not to use this tool
Not for anything that moves. A shadow is painted by the compositor each frame it changes, so animating one repaints the element's whole surroundings sixty times a second — the standard trick is a pseudo-element holding the shadow and animating only its opacity, which the compositor can do without repainting anything. And a shadow is a weak signal on its own: on a dark surface it is nearly invisible, and if a boundary genuinely matters a border states it in one property that survives every background.
Frequently Asked Questions
- What does each value control?
- Horizontal and vertical offset, blur radius, spread radius, and colour — with the optional `inset` keyword drawing the shadow inside the box instead of behind it.
- What does spread do that blur does not?
- Spread grows or shrinks the shadow shape before it is blurred. A negative spread pulls it in, which is how you get a shadow that peeks out below an element without spilling around the sides.
- How do I make a shadow look natural?
- Offset it mostly downward, keep the blur larger than the offset, and use a low-opacity black rather than grey — grey looks flat over coloured backgrounds. Layering two shadows, one tight and one wide, reads as real depth.
- Does the shadow affect layout?
- No. It is painted outside the box model and takes no space, so it can overlap neighbours and be clipped by an ancestor with `overflow: hidden` — which is the usual reason a shadow appears cut off.
- Does it follow border-radius?
- Yes, the shadow takes the element's rounded shape automatically. That is why a shadow on a rounded card needs no separate configuration, and why changing the radius silently changes the shadow too.
- When should I use inset?
- For recessed effects — pressed buttons, input wells, and the subtle inner top shadow that makes a field look inset. An inset shadow is drawn inside the padding box, so it sits above the background but below the content.
Common errors and gotchas
- Using a single hard shadow where two layered ones read as far more natural.
- Using a shadow as the only signal that something is interactive.
- Producing a shadow invisible on a dark background, which needs a different treatment.
- Animating a box shadow, which is expensive — animate a pseudo-element's opacity instead.
- Relying on a shadow for a boundary that a border would state more clearly.