box-shadow

box-shadow paints shadows around or inside an element’s box. It follows the box’s border radius and does not reserve layout space for the shadow.

Compare an outer shadow with an inset shadow

Both samples use the same offsets, blur, and color. Inset puts the shadow inside the box. The pale background keeps each boundary visible.

<div class="sample outer">Outer shadow</div>
<div class="sample inner">Inset shadow</div>

.sample {
  padding: 1rem;
  background: #eff6ff;
  margin: 1.5rem 0.75rem;
  border-radius: 0.5rem;
}
.outer {
  box-shadow: 4px 4px 8px 0 #94a3b8;
}
.inner {
  box-shadow: inset 4px 4px 8px 0 #94a3b8;
}

Layer a border-like ring and a soft shadow

The first shadow is a crisp blue ring with 2px spread. The second is softer and sits underneath. The button has a real keyboard outline; its shadow is decoration.

<button
  type="button"
  onclick="document.querySelector('output').textContent = 'Example activated'"
>
  Try the button</button
><output aria-live="polite"></output>

button {
  margin: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #172554;
  background: white;
  color: #172554;
  font: inherit;
  box-shadow:
    0 0 0 2px #bfdbfe,
    0 5px 8px -2px #94a3b8;
}
button:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 5px;
}

Syntax and defaults

Each shadow requires horizontal and vertical length offsets. An optional third length is the blur radius; it must be nonnegative. An optional fourth length is spread and may be negative. Add a color explicitly. Inset may appear before or after the other components. Commas separate shadows; the first is painted above later ones.

The initial value is none and box-shadow is not inherited. Positive offsets move right/down; negative offsets move left/up. Spread grows or shrinks the shadow shape before blurring. Ancestor clipping may cut off an outer shadow, so leave space where the effect matters.

Common mistakes

A shadow does not push nearby elements away. A static sample should not be labeled a hover state. Shadows alone are unreliable keyboard-focus indicators, especially in forced-color modes; use an outline. For a shadow following a transparent shape rather than its rectangular box, see filter:drop-shadow().

Compare text-shadow and outline.

Sources and browser support

MDN: box-shadow describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.