実行できるCSSドキュメント: CSS box-shadow

Q: box-shadow の書き方は？

box-shadow: offset-x offset-y blur spread color; です。例: box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);。必須なのは 2 つのずらしの値だけで、inset を付けるとボックスの内側に影を描きます。

Q: 下だけに影を付けるには？

影を下にずらし、負の spread で内側に引っ込めて左右を消します: box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);。

box-shadow のしくみ

box-shadow は要素の border ボックスの周りに影を描きます。border-radius に沿い、レイアウトでは場所を取らず、少なくとも 2 つの値 (横と縦にどれだけずらすか) が必要です。

<!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>

書き方

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

値	意味	初期値
`inset`	へこんだ部分のように、ボックスの内側に影を描く	外側
offset-x	正の値で右、負の値で左にずらす	必須
offset-y	正の値で下、負の値で上にずらす	必須
blur	縁のぼかし具合。負の値は不可	`0` (くっきりした縁)
spread	影を大きく (正の値) または小さく (負の値) する	`0`
color	任意の色。半透明の黒が一番きれいに見えることが多い	文字の色

長さの数で意味が決まります。2 つならずらし、3 つならぼかしが加わり、4 つなら spread が加わります。試してみてください:

<!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>

0 0 0 4px #f59e0b (リング)、inset 0 0 12px #2563eb、-8px -8px 0 #16a34a を試してみてください。

spread: リングと片側だけの影

spread はぼかす前に影の大きさを変えます。ここから 2 つのパターンが生まれます:

<!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>

リング: ずらしもぼかしもなく、spread だけ。border と違って要素のサイズを変えないので、フォーカスの表示に向いています (:focus-visible { box-shadow: 0 0 0 3px #2563eb; })。
すき間のあるリング: 白い spread を、それより大きい色付きの spread の下に重ねます。
片側だけ: 影を下にずらし、負の spread で小さくして、下にだけのぞくようにします。

影を重ねて自然な奥行きを出す

本物の影には、物体の近くの暗くくっきりした部分と、離れたところの柔らかく薄い部分があります。2 つか 3 つのレイヤーを重ねると、大きなぼかし 1 つよりずっと本物らしくなります:

<!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>

リストの最初の影が一番上に描かれます。影の色は半透明の黒か背景の暗い色にして、純粋な灰色は避けましょう。そうすれば下にあるものが何でも暗く見えます。

内側の影 (inset)

inset は、表面がへこんでいるように padding ボックスの内側に影を描きます。テキスト入力欄、くぼみ、押されたボタンに向いています:

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%);
}

内側の影は背景の上、内容の下に描かれます。ボックスではなく文字の形に沿う影は text-shadow です。

よくある間違い

完全に不透明な真っ黒の影。 黒い輪郭線のように見えます。アルファ値は 10% から 30% にしましょう。
奥行きを大きなぼかし 1 つで出す。 小さくくっきりした影と大きく柔らかい影を重ねます。
影が端で切れる。 祖先の overflow: hidden で切り取られています。祖先に padding を足すか、overflow の指定を移しましょう。
負のぼかし。 無効で、宣言全体が無視されます。
多くの要素で box-shadow をアニメーションさせる。 毎フレーム再描画されます。重いページでは、大きい影を持たせた疑似要素の opacity をアニメーションさせましょう。