CSS box-shadow

The box-shadow property adds one or more shadows around an element's box. It is useful for depth, focus, overlays and small visual cues, as long as the shadow does not look like it was installed during a very enthusiastic 2012 redesign.

Syntax

box-shadow: none;
box-shadow: offset-x offset-y blur-radius spread-radius color;
box-shadow: inset offset-x offset-y blur-radius spread-radius color;
box-shadow: shadow-1, shadow-2, shadow-3;

A shadow needs at least two length values: the horizontal offset and the vertical offset. Blur, spread, color and inset are optional, but they are what make the result look intentional instead of accidental.

How the values work

offset-x: Moves the shadow left or right. Positive values move it to the right; negative values move it to the left.
offset-y: Moves the shadow up or down. Positive values move it down; negative values move it up.
blur-radius: Softens the shadow edge. A larger blur spreads the fade over more space. Negative blur values are not valid.
spread-radius: Expands or shrinks the shadow before blur is applied. Positive spread makes the shadow larger; negative spread pulls it inward.
color: Sets the shadow color. Semi-transparent colors such as rgba() or modern color syntax usually look more natural than solid black.
inset: Draws the shadow inside the element instead of outside it.
none: Removes all shadows from the element.

Basic example

The declaration below adds a soft shadow to a simple card.

Code

Result

Common patterns

Simple shadow

box-shadow: 8px 8px 0 #94a3b8;

A sharp shadow with no blur can create a graphic, offset effect. It is strong, so use it deliberately.

Soft elevation

box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);

A vertical offset with blur and a transparent color gives a card or popover a light sense of elevation.

Spread radius

box-shadow: 0 10px 18px 6px rgba(37, 99, 235, 0.18);

The spread value expands the shadow before it is blurred. It can make a shadow more visible without increasing the offset.

Inset shadow

box-shadow: inset 0 0 18px rgba(15, 23, 42, 0.24);

inset draws the shadow inside the element. It is useful for pressed states, wells and controls that should look recessed.

Multiple shadows

box-shadow:
  0 1px 2px rgba(15, 23, 42, 0.16),
  0 12px 24px rgba(37, 99, 235, 0.18);

Separate shadows with commas. Layering a small close shadow with a larger soft one often looks better than forcing one value to do everything.

Common mistakes

Using pure black at full opacity. Real shadows are usually softer and more transparent.
Making every card float. If everything is elevated, nothing is elevated.
Confusing box-shadow with filter: drop-shadow(). box-shadow follows the element box; drop-shadow() follows the rendered shape, including transparent parts.
Removing focus outlines and replacing them with a weak shadow. Keyboard focus must remain clearly visible.

Browser support

box-shadow is supported by all modern browsers. For current work, you can use it without vendor prefixes.