Runnable CSS Docs: Box Shadow

Q: What is the box-shadow syntax?

box-shadow: offset-x offset-y blur spread color;, for example box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Only the two offsets are required; add inset to draw the shadow inside the box.

How box-shadow works

box-shadow paints a shadow around an element's border box. It follows border-radius, takes no space in the layout, and needs at least two values: how far to move it horizontally and vertically.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 16px; }
    .row { display: flex; gap: 24px; flex-wrap: wrap; }
    .card {
      width: 150px; padding: 20px 12px; text-align: center;
      background: white; border-radius: 10px; font-size: 14px;
    }
    .hard { box-shadow: 6px 6px 0 #111827; }
    .soft { box-shadow: 0 4px 12px rgb(0 0 0 / 15%); }
    .inset { box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="card hard">6px 6px 0 #111827</div>
    <div class="card soft">0 4px 12px, 15% black</div>
    <div class="card inset">inset 0 2px 6px</div>
  </div>
</body>
</html>

The syntax

box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] [<color>];

Value	Meaning	Default
`inset`	Draw the shadow inside the box, like a pressed-in area	Outside
offset-x	Positive moves right, negative left	Required
offset-y	Positive moves down, negative up	Required
blur	How soft the edge is; cannot be negative	`0` (a hard edge)
spread	Grows (positive) or shrinks (negative) the shadow	`0`
color	Any color; a semi-transparent black usually looks best	The text color

The number of lengths decides their meaning: two are the offsets, three add blur, four add spread. Try it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      width: 160px; height: 90px; margin: 32px;
      background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
    }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>box-shadow: <input id="val" value="0 10px 20px -5px rgb(37 99 235 / 50%)" size="36"></label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.boxShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(box).boxShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Try 0 0 0 4px #f59e0b (a ring), inset 0 0 12px #2563eb, and -8px -8px 0 #16a34a.

Spread: rings and one-sided shadows

Spread changes the shadow's size before blurring. Two patterns come out of it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spread</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
    .box { width: 140px; padding: 18px 10px; text-align: center; background: white; border: 1px solid #e5e7eb; font-size: 14px; }
    .ring { box-shadow: 0 0 0 4px #2563eb; border-radius: 8px; }
    .double { box-shadow: 0 0 0 3px white, 0 0 0 6px #16a34a; border-radius: 8px; }
    .bottom { box-shadow: 0 10px 8px -8px rgb(0 0 0 / 50%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="box ring">4px ring</div>
    <div class="box double">gap then ring</div>
    <div class="box bottom">bottom only</div>
  </div>
</body>
</html>

A ring: no offset, no blur, only spread. Unlike a border, it does not change the element's size, so it is a good focus indicator (:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
A ring with a gap: stack a white spread under a colored, larger one.
One side only: move the shadow down and shrink it with a negative spread, so it only peeks out at the bottom.

Layered shadows for realistic depth

Real shadows have a dark, sharp part close to the object and a soft, faint part further away. Two or three layers imitate that far better than one large blur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Elevation</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 24px 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; }
    .card { width: 140px; padding: 24px 10px; text-align: center; background: white; border-radius: 12px; font-size: 14px; }
    .one { box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
    .layered {
      box-shadow:
        0 1px 2px rgb(0 0 0 / 12%),
        0 4px 8px rgb(0 0 0 / 8%),
        0 12px 24px rgb(0 0 0 / 8%);
    }
    .lift { transition: transform 0.2s, box-shadow 0.2s; }
    .lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 16px 32px rgb(0 0 0 / 14%);
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="card one">One heavy shadow</div>
    <div class="card layered">Three layers</div>
    <div class="card layered lift">Hover me</div>
  </div>
</body>
</html>

The first shadow in the list is painted on top. Keep shadow colors semi-transparent black or a dark tint of the background, never pure gray, so they darken whatever is underneath.

Inset shadows

inset draws the shadow inside the padding box, as if the surface were pressed in. It suits text inputs, wells and pressed buttons:

input {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
button:active {
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 30%);
}

An inset shadow is drawn above the background but below the content. Shadows that follow letter shapes instead of the box are text-shadow.

Common mistakes

Pure black, fully opaque shadows. They look like a dark outline. Use 10% to 30% alpha.
One huge blur for depth. Layer a small sharp shadow with a large soft one.
A shadow cut off at the edge. An ancestor with overflow: hidden clips it; add padding to the ancestor or move the overflow rule.
Negative blur. It is invalid and the whole declaration is ignored.
Animating box-shadow on many elements. It repaints every frame. For heavy pages, animate the opacity of a pseudo-element that carries the bigger shadow instead.

Frequently Asked Questions

What is the box-shadow syntax?

box-shadow: offset-x offset-y blur spread color;, for example box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Only the two offsets are required; add inset to draw the shadow inside the box.

What does spread do in box-shadow?

It grows (positive) or shrinks (negative) the shadow before it is blurred. A shadow with no offset, no blur and a spread of 3px is a solid 3px ring around the element.

How do I put a shadow only on the bottom?

Offset it down and pull it in with a negative spread so the sides disappear: box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);.

Does box-shadow affect layout?

No. A shadow takes no space and does not move other elements, which is why it is a good way to add a focus ring or a hover lift without layout shift. It can be clipped by an ancestor's overflow: hidden.

Can I have multiple box shadows?

Yes, separate them with commas. The first shadow is drawn on top. Layering a small sharp shadow with a large soft one looks more natural than one big shadow.

Related concepts