CSS Box Shadow Generator

What box-shadow does

box-shadow paints a shadow behind or inside an element's box. The shadow follows the element's own border-radius, so a rounded card gets a rounded shadow without any extra work. Shadows take up no space in the document flow, which means adding one never nudges the elements around it.

In interface work a shadow is not decoration, it is a depth cue. It is usually the shadow that tells someone a dropdown, a modal or a dragged card is floating above the rest of the page. A soft, wide shadow reads as high above the surface, while a tight, dark one reads as barely lifted off it.

The four length values

A single shadow layer takes up to four lengths, always in this order:

• offset-x moves the shadow horizontally. Positive pushes it right, negative left.
• offset-y moves it vertically. Positive pushes it down, negative up.
• blur sets how many pixels the edge fades over. It cannot be negative, and 0 leaves a perfectly hard copy of the shape.
• spread grows or shrinks the shadow before it is drawn. It is the second value that accepts a negative number.

The third and fourth values are optional. Write only two lengths and the browser reads them as offset-x and offset-y with blur and spread at zero. Leave the colour out and the shadow falls back to currentColor, which is rarely what anyone wants, so state the colour explicitly.

Spread is not blur

Both appear to make a shadow bigger, but they work differently. blur leaves the shape alone and turns its edge into a gradient: fully opaque in the middle, fading to nothing at the rim. spread changes the geometry itself, growing the shadow shape outward by the amount you give it in every direction.

That difference pays off twice. A negative spread pulls the sides of the shadow back under the element so it pools only below, which is how most modern card shadows are built. A zero blur with a positive spread fakes a border instead, letting you add a visual frame without touching layout measurements.

inset shadows

Put the inset keyword at the front of a layer and the shadow is drawn inside the box rather than around it. That is how you get a pressed button, a recessed search field or the soft darkening at the top of a long scrolling list. An inset shadow sits above the background but below the content, so it never dims the text inside the box.

Why designers stack several shadows

One shadow rarely looks like a real object under real light. In the physical world there is a small, dark contact shadow right under an object and a wide, faint ambient shadow spreading out from it. CSS lets you reproduce that by listing several comma separated layers on the same property:

• a tight, dark layer that plants the element on the surface,
• a middle layer that smooths the transition,
• a wide, very transparent layer that suggests height.

Order matters. The first layer in the list is painted on top of the ones after it, so putting the tightest and darkest layer first keeps it from being swallowed by the wider ones. Material Design's elevation scale is defined exactly this way, as a set of three stacked layers.

A common misstep is reaching for transparent pure black. Over a coloured background a black shadow drains the scene toward grey and looks muddy. Pick a dark, saturated version of the background hue instead. Keeping the CSS gradient generator open in a second tab makes it easier to sample a hue that belongs to the same palette.

box-shadow vs drop-shadow vs text-shadow

The practical difference is easy to see: give a transparent icon a box-shadow and you get the shadow of its bounding box, not of the icon. drop-shadow reads the alpha channel and traces the real silhouette. In exchange it is harder to stack than box-shadow and generally more expensive to render.

Performance notes

Shadows are resolved during paint. As the blur radius grows, both the painted area and the cost of computing it climb quickly, so a 100px blur repeated across a grid of cards will visibly slow scrolling on mid range phones.

The real trap is animating box-shadow. Every frame forces a repaint, and that work cannot be handed to the GPU. The standard fix is to attach an ::after pseudo element carrying the target shadow, start it at opacity: 0 and animate only the opacity on hover. Opacity animates on the compositor, so no repaint is needed.

Accessibility

A shadow is a decorative signal and should never carry meaning on its own. Communicating focus with a soft glow alone disappears in forced colours mode and for anyone with low vision. If you build a focus ring out of box-shadow, give it enough contrast and at least 2px of thickness, and do not strip outline entirely. Remember that Windows high contrast mode does not paint shadows at all.

Common mistakes

• Swapping the order: blur is third, spread is fourth. Reverse them and the browser quietly drops the whole declaration.
• Writing a negative blur. It is invalid and invalidates the rule with it.
• Being surprised when a parent with overflow: hidden clips a child's shadow.
• Using a shadow as a border and then expecting that thickness to count in layout. It never does.
• Writing two separate box-shadow declarations on the same selector. The second one replaces the first instead of adding to it, because layers belong on one line separated by commas.