【CSS】text-shadow の使い方｜文字に影・縁取り・ネオン風の文字を付ける方法

文字の後ろにうっすら影を落として読みやすくしたり、白抜き文字に縁取りを付けたり、ネオンサインのように発光させたり。そうした文字の装飾を CSS だけで実現できるのが text-shadow プロパティです。この記事では、offset-x offset-y blur-radius color という基本構文から、影をカンマ区切りで複数重ねる方法、それを応用した縁取りやネオン風の表現、そして混同されやすい box-shadow との違いまで、コーディング初心者〜中級者の方に向けて MDN の仕様に沿って解説します。

text-shadow とは何をするプロパティか

text-shadow は、テキスト（文字そのもの）に影を付けるためのプロパティです。要素の箱ではなく、文字の形に沿って影が落ちるのが特徴で、見出しやロゴ風の装飾、画像の上に重ねた文字を読みやすくする目的などでよく使われます。値には、影をずらす位置・ぼかしの強さ・色を指定します。

影は文字の背後に描画されるため、文字自体の色（color）はそのまま残り、その後ろに指定した色の影が重なります。次の章で、まずは最小の書き方を見ていきましょう。

基本構文は offset-x offset-y blur-radius color

text-shadow の値は、水平方向のずれ・垂直方向のずれ・ぼかし半径・色の4つを、半角スペースで区切って並べます。順番と意味は次のとおりです。

必須なのは offset-x と offset-y の2つで、blur-radius と color は省略できます。たとえば text-shadow: 2px 2px 4px #888; なら「右に2px・下に2px ずらし、4px ぼかしたグレーの影」という意味になります。色は offset の前に書いても後に書いても構いませんが、後ろにそろえると読みやすいでしょう。

下のデモでは、ぼかしありの柔らかい影と、blur-radius を省いたぼかしなしのくっきりした影を並べています。CSS の数値を書き換えると、影がどう動くか試せます。

<div class="demo">
  <p class="soft">ふんわりした影</p>
  <p class="hard">くっきりドロップシャドウ</p>
</div>

.demo {
  font-family: sans-serif;
  background: #f7f7f7;
  padding: 32px 16px;
  text-align: center;
}

.demo p {
  margin: 0 0 24px;
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.demo p:last-child {
  margin-bottom: 0;
}

/* offset-x offset-y blur-radius color */
.soft {
  text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4);
}

/* blur-radius を省くとぼかしなしの影になる */
.hard {
  text-shadow: 3px 3px #b0b0b0;
}

このように、blur-radius を指定するかどうかだけで、印象は大きく変わります。読みやすさの補助としてうっすら影を付けたいなら小さめのぼかしを、印刷物のような硬い質感を出したいならぼかしなしで offset だけ、と使い分けるとよいでしょう。

カンマ区切りで複数の影を重ねる

text-shadow は、影を1つだけでなく複数指定できます。それぞれの影をカンマ（,）で区切って並べるだけです。書いた順に手前から奥へと重なり、リストの先頭にある影が一番上に描画されます。

たとえば text-shadow: 1px 1px 2px #555, 3px 3px 5px #aaa; のように書くと、濃い近い影と、薄い遠い影の2枚が重なって立体感が増します。この「影を重ねられる」性質が、次に紹介する縁取りやネオン風の表現の土台になります。

複数の影で文字を縁取りする

影を上下左右の4方向にずらして重ねると、文字のまわりを縁取りした（アウトラインを付けた）ように見せられます。仕組みはシンプルで、ぼかしなし（blur-radius を 0）の影を、右上・右下・左上・左下の4箇所にわずかにずらして配置するだけです。文字の各辺の外側に同じ色の影が回り込み、結果として縁取りのように見えます。

下のデモは、白い文字を赤で縁取りした例です。1px ずつ4方向にずらした影を重ねています。背景が明るい場所に白文字を置くと読みにくくなりますが、縁取りを付けることで文字がくっきり浮き上がります。

<div class="demo">
  <p class="outline">縁取り文字</p>
</div>

.demo {
  font-family: sans-serif;
  background: #ffd54a;
  padding: 40px 16px;
  text-align: center;
}

.outline {
  margin: 0;
  font-size: 44px;
  font-weight: bold;
  color: #fff;
  /* 上下左右4方向に影を重ねて、白文字を縁取りする */
  text-shadow:
     1px  1px 0 #e53935,
    -1px  1px 0 #e53935,
     1px -1px 0 #e53935,
    -1px -1px 0 #e53935;
}

この方法は手軽ですが、縁取りを太くしようと offset を大きくすると、文字の角の部分にすき間ができて縁が途切れて見えることがあります。線の太さを正確に揃えたい縁取りには、専用のプロパティである -webkit-text-stroke を使う方法もあります。装飾の範囲なら text-shadow による疑似的な縁取りで十分なことが多いです。

ぼかしを重ねてネオン風に発光させる

縁取りとは逆に、ぼかし半径の大きい影を何枚も重ねると、文字が光っているようなネオン風の表現になります。コツは、offset-x と offset-y をどちらも 0 にして影をずらさず、blur-radius だけを 4px → 10px → 20px → 40px のように段階的に大きくしていくことです。中心に近いほど明るく、外側ほど淡く広がるため、発光しているように見えます。

下のデモは、白い文字にシアン（水色）の光をまとわせた例です。暗い背景に置くと発光感が際立ちます。blur-radius の数値や色を変えると、光の強さや色味を調整できます。

<div class="demo">
  <p class="neon">NEON GLOW</p>
</div>

.demo {
  font-family: sans-serif;
  background: #11131a;
  padding: 48px 16px;
  text-align: center;
}

.neon {
  margin: 0;
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #fff;
  /* ぼかし半径の違う影を何重にも重ねて発光しているように見せる */
  text-shadow:
    0 0 4px #fff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 40px #0ff;
}

ぼかしの大きい影を重ねるほど光は強く広がりますが、枚数を増やしすぎると描画の負荷も上がります。必要な見栄えが得られる範囲で、3〜4枚程度に抑えるのが扱いやすいでしょう。

box-shadow との違いは「文字か、要素の箱か」

名前がよく似ている box-shadow と混同されがちですが、影を落とす対象が異なります。text-shadow は文字の形に沿って影を付けるのに対し、box-shadow は要素の箱（ボーダーボックス、つまり四角い領域）に影を付けます。たとえば同じ <p> に指定しても、text-shadow は文字の輪郭から影が出て、box-shadow は段落の長方形の外側に影が出ます。

値の構文も少し違います。box-shadow は offset-x offset-y blur-radius に加えて、影を広げる spread-radius と、内側に影を落とす inset キーワードを使えますが、text-shadow にはこの2つはありません。主な違いを整理すると次のとおりです。

文字を装飾したいときは text-shadow、ボタンやカードなど要素そのものに影を付けて浮かせたいときは box-shadow、と覚えておくと使い分けに迷いません。

影が表示されないときに確認すること

offset とぼかしがどちらも 0 になっている

offset-x・offset-y・blur-radius がすべて 0 だと、影は文字とぴったり同じ位置に重なり、文字の下に隠れてほとんど見えません。影を見せたいときは、位置をずらす（offset を 0 以外にする）か、ぼかして広げる（blur-radius を大きくする）かのどちらかが必要です。発光表現で offset を 0 にする場合は、必ず blur-radius に値を入れましょう。

影の色が背景や文字と同系色になっている

影は付いていても、その色が背景色とほぼ同じだと見えません。白い背景に白っぽい影を落としていないか、暗い背景に黒い影を落としていないかを確認してください。影は文字色や背景色と十分にコントラストのある色を選ぶと、はっきり見えるようになります。

色を省略して意図しない色になっている

color を省略した場合、影の色は環境によって扱いが変わり、想定と違う色（多くは currentColor、つまり文字色）になることがあります。狙った色の影にしたいときは、影の色を省略せず明示的に指定するのが確実です。

まとめ

text-shadow は、offset-x offset-y blur-radius color の順に値を並べて、文字に影を付けるプロパティです。blur-radius を省けばぼかしなしのくっきりした影に、入れれば柔らかい影になります。影はカンマ区切りで複数重ねられ、4方向にずらせば縁取り、offset を 0 にしてぼかしを段階的に重ねればネオン風の発光、というように応用が広がります。よく似た box-shadow は要素の箱に影を付けるもので、文字に影を付ける text-shadow とは対象が異なる点を押さえておきましょう。影が見えないときは、offset とぼかしがどちらも 0 になっていないか、影の色が背景と同系色になっていないかをまず確認してください。

参考ページ

• text-shadow – CSS: カスケーディングスタイルシート | MDN
• box-shadow – CSS: カスケーディングスタイルシート | MDN
• <color> – CSS: カスケーディングスタイルシート | MDN