実行できるCSSドキュメント: CSS 文字の影

Q: text-shadow の書き方は？

text-shadow: offset-x offset-y blur-radius color; と書きます。例: text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);。2 つのずれは必須で、ぼかしの初期値は 0、色の初期値は文字色です。

Q: 文字に複数の影を付けるには？

影をカンマで区切ります: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;。最初の影が、後に続く影の上に描かれます。

Q: 文字を光らせる効果を付けるには？

ずれなしでぼかした影を使います。ぼかしを段階的に大きくした影を重ねることが多いです: text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb;。暗い背景ではネオンの光のように見えます。

Q: text-shadow には box-shadow のような spread の値がありますか？

ありません。text-shadow には spread も inset キーワードもありません。文字の周りの影を太くするには、影をいくつも重ねるか、縁取りに -webkit-text-stroke を使います。

CSS text-shadow で文字に影を付ける: 書き方、光彩、縁取り

text-shadow はテキストの後ろに 1 つ以上の影を描きます。4 つの値 (横のずれ、縦のずれ、ぼかし、色)、影を重ねて光彩、縁取り、立体の効果を作る方法、影で騒がしい背景の上の文字を読みやすくする方法を解説します。

このページのコードはエディタで実行できます - 編集してすぐに結果を確認できます。

著者 Kevin Spektor, Co-founder & CTO

公開日：Sep 24, 2026

text-shadow の仕組み

text-shadow は、テキストのコピーをずらしてぼかし、テキストの後ろに描きます。横のずれ、縦のずれ、省略可能なぼかし、色を指定します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 36px; font-weight: 700; color: #111827; }
    p { margin: 12px 0; }
    .hard { text-shadow: 3px 3px 0 #f59e0b; }
    .soft { text-shadow: 2px 2px 6px rgb(0 0 0 / 35%); }
  </style>
</head>
<body>
  <p class="hard">Hard shadow</p>
  <p class="soft">Soft shadow</p>
</body>
</html>

3px 3px 0 #f59e0b は、右に 3px (物理的な方向で、どの書字方向でも同じ)、下に 3px、ぼかしなし、オレンジ色という意味です。2 つ目の影は 6px ぼかし、半透明の黒を使っています。控えめな奥行きを出す定番の組み合わせです。

書き方

text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

値	必須か	意味
offset-x	必須	正の値で右に、負の値で左にずれる
offset-y	必須	正の値で下に、負の値で上にずれる
blur-radius	省略可 (初期値 0)	輪郭のぼけ具合。負の値は無効
color	省略可 (初期値は文字色)	先頭にも末尾にも書ける

text-shadow: none で継承した影を消せます。下の値を変えて、それぞれの効果を見てみましょう:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { font-size: 44px; font-weight: 800; margin: 16px 0; }
  </style>
</head>
<body>
  <label>text-shadow: <input id="val" value="4px 4px 8px #2563eb" size="28"></label>
  <p id="sample">Shadow</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.textShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).textShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

-4px -4px 0 #16a34a、0 0 10px red、カンマで区切った 2 つの影を試してみてください。

複数の影: 光彩、縁取り、立体

カンマで影を重ね、最初の影がいちばん上に描かれます。このルール 1 つから 3 つの効果が作れます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacked shadows</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 40px; font-weight: 800; margin: 0; }
    div { padding: 12px 16px; }
    .neon {
      background: #111827; color: #eff6ff;
      text-shadow: 0 0 4px #93c5fd, 0 0 12px #3b82f6, 0 0 24px #2563eb;
    }
    .outline {
      color: #ffffff;
      text-shadow: -2px -2px 0 #111827, 2px -2px 0 #111827,
                   -2px 2px 0 #111827, 2px 2px 0 #111827;
    }
    .deep {
      color: #f59e0b;
      text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309,
                   3px 3px 0 #b45309, 4px 4px 0 #92400e;
    }
  </style>
</head>
<body>
  <div class="neon">Neon glow</div>
  <div class="outline">Outlined</div>
  <div class="deep">3D text</div>
</body>
</html>

光彩: ずれはゼロ、ぼかしを段階的に大きく、暗い背景の上で。
縁取り: 斜め 4 方向に 1 つずつ、ぼかしなしの影を置きます。細い縁取りならこれで十分です。太さの均一な縁取りには、-webkit-text-stroke: 2px #111827 (接頭辞付きですが現在のすべてのブラウザで使えます) で文字の輪郭に線を引きます。
立体: 1px ずつずらしたぼかしなしの影を並べ、文字が押し出されたように見せます。

騒がしい背景の上で文字を読みやすくする

写真や模様の上の白い文字は、背景が明るい部分で輪郭が消えてしまいます。柔らかい暗い影を付ければ、目に見える箱を置かずに輪郭を取り戻せます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Readable on a pattern</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      padding: 32px 16px;
      background: repeating-linear-gradient(45deg, #fde68a 0 20px, #ffffff 20px 40px);
      font-size: 32px; font-weight: 800; color: #ffffff;
    }
    .with { text-shadow: 0 1px 3px rgb(0 0 0 / 70%), 0 0 12px rgb(0 0 0 / 40%); }
  </style>
</head>
<body>
  <div class="hero">Without a shadow</div>
  <div class="hero with">With a shadow</div>
</body>
</html>

影は助けになりますが、コントラストを保証するものではありません。画像の上に長い文章を載せるときは、テキストの後ろに単色かグラデーションのオーバーレイも加えましょう。

text-shadow と box-shadow

	text-shadow	box-shadow
形に沿うもの	文字の形	要素のボックス (と角丸)
spread の値	なし	あり
`inset`	なし	あり
カンマ区切りで複数	可能	可能

カードやボタンの影については box-shadow を参照してください。

よくある間違い

本文に濃く重い影を付ける。 文字の形がぼやけます。影は見出しや短いラベルだけに使いましょう。
2 つ目のずれを忘れる。 text-shadow: 2px #000 は無効です。2 つのずれはどちらも必須です。
ぼかしに負の値を使う。 無効で、宣言全体が捨てられます。
影が空間を取ると思う。 描画されるだけなので、大きな影は次の行に重なったり、overflow: hidden で切れたりします。
明るい背景で光彩を使う。 白の上の明るい光彩は見えません。光彩には暗い背景が必要です。

よくある質問

text-shadow の書き方は？

text-shadow: offset-x offset-y blur-radius color; と書きます。例: text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);。2 つのずれは必須で、ぼかしの初期値は 0、色の初期値は文字色です。

文字に複数の影を付けるには？

影をカンマで区切ります: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;。最初の影が、後に続く影の上に描かれます。

文字を光らせる効果を付けるには？

ずれなしでぼかした影を使います。ぼかしを段階的に大きくした影を重ねることが多いです: text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb;。暗い背景ではネオンの光のように見えます。

text-shadow には box-shadow のような spread の値がありますか？

ありません。text-shadow には spread も inset キーワードもありません。文字の周りの影を太くするには、影をいくつも重ねるか、縁取りに -webkit-text-stroke を使います。

text-shadow はレイアウトに影響しますか？

しません。影は描画されるだけで、空間を取らず、周りの内容も動かしません。そのため大きな影は近くの要素に重なることがあります。