CSS

text-shadow って何をしてくれるもの？

text-shadow は「文字そのもの」に影（シャドウ）を描いて、読みやすさを上げたり、立体感・ネオンっぽさなどの演出を足したりできるCSSです。影は“箱”ではなく“文字の形（グリフ）”に沿って付きます。さらに、影はカンマ区切りで何個でも重ねられます。

基本の書き方（まずここだけでOK）

.selector {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
}

値の並び（重要）

1つの影は、基本的に次の順で指定します。

• offset-x（横方向のずれ）
• offset-y（縦方向のずれ）
• blur-radius（ぼかし：省略可）
• color（色：省略可）

影は「2つまたは3つの長さ + 任意の色」で指定できます。

それぞれの値を“感覚で”理解する

offset-x / offset-y（影の位置）

• offset-x がプラス → 右へ
• offset-y がプラス → 下へ

つまり、

text-shadow: 6px 6px 0 #000;

は「右下に、くっきりした影」です（ぼかしが0なので輪郭が硬い）。

逆に、

text-shadow: -3px 0 0 #000;

は「左に影」です。

blur-radius（影の“ふわっと具合”）

• 0 だとカクッとした影
• 大きいほど、ふわっと広がる

注意として、text-shadow は box-shadow と違って spread（広がり量）や inset はありません。ぼかしだけです。

color（色）

色は最後に置くのが読みやすいです。

text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

また、text-shadow は影を文字と一緒に塗るので、背景が写真やグラデーションでも文字を浮かせやすいのが強みです。

複数影（ここから一気に表現の幅が増えます）

カンマで区切ると影を重ねられます。

しかも 最初に書いた影が一番上（手前） になります。

.title {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 10px 20px rgba(0, 0, 0, 0.25);
}

• 1個目：上品なハイライト（上に薄く乗る）
• 2個目：下に落ちる柔らかい影（奥）

よく使う“鉄板レシピ”集（コピペして調整するだけ）

読みやすさ最優先（写真背景でも強い）

.heroText {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

コツ：

• まずは「少し下方向 + そこそこぼかし + 半透明黒」
• 影を濃くしすぎると“汚れた文字”に見えやすいので、rgbaで調整

<div class="hero">
    <img src="photo.jpg" alt="">
    <div class="heroText">
        Yugien
    </div>
</div>

• <img> は普通の写真
• 文字は絶対配置で上に重ねます

.hero {
	position: relative;
}

.hero img {
	display: block;
	max-width: 100%;
}

.heroText {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	color: #ffffff;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 0.05em;

	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

Yugien

なぜこの text-shadow なのか（重要）

text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);

これには理由があります。

横方向はずらさない（0）

• 文字が左右にブレると読みにくくなる
• 「下に落ちる影」だけにすることで自然

下に 2px

• 人間の目は「上が光、下が影」に慣れている
• 立体感が出て、無意識に読みやすい

ぼかしは 10px と広め

• 写真の明暗が激しくても、影が背景を包み込む
• 小さいぼかしだと「輪郭が汚れる」だけになる

色は rgba の黒

• #000 だと影が強すぎて文字が汚れる
• 0.5〜0.6 くらいの透明度が安全ゾーン

写真が特に明るい場合（影を2重にする）

空・雪・白い壁など、影1つでは負ける場合があります。

そのときは「くっきり影＋広い影」の2段構えにします。

Yugien

.heroText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    color: #ffffff;
    font-size: 48px;
    font-weight: 700;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45),
        0 6px 16px rgba(0, 0, 0, 0.45);
}

• 1つ目：輪郭を支える影
• 2つ目：背景全体から浮かせる影

写真背景では、この形が最強クラスに安定します。

スマホ向け（文字が小さくなる場合）

小さい文字に同じ影を使うと、少し重く見えます。

@media (max-width: 600px) {
    .heroText {
        font-size: 32px;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }
}

フォントサイズが下がったら、影も「少し弱める」のがコツです。

実務メモ（かなり大事）

• 影で読ませようとしすぎない
  • 影は補助
  • 文字色がまず最優先
• 写真が本当に厳しい場合は
  • 文字の背後に linear-gradient() を敷く
    （ただし今回は text-shadow だけ に集中）
• デザイン調整は
  • まず blur-radius
  • 次に rgba の透明度
  • 最後に offset-y

この順で触ると迷いません。

くっきり縁取り（アウトライン風）

text-stroke が使えない・使いたくない場面でも、影の多重で縁取りっぽくできます。

.textOutline {
    color: #fff;
    text-shadow:
        1px 0 0 #000,
        -1px 0 0 #000,
        0 1px 0 #000,
        0 -1px 0 #000;
}

Yugien

縁取りは「影を上下左右に1pxずつ置く」ことで作れます。

太くしたい場合は、2px や斜め方向の影を追加しますが、文字が小さいときは太りすぎに注意します。

明るい写真でも負けない強化版

白背景に近い写真や、空・室内写真向けです。

アウトライン＋薄いぼかし影 を併用します。

.textOutlineStrong {
	color: #ffffff;

	text-shadow:
		1px 0 0 #000,
		-1px 0 0 #000,
		0 1px 0 #000,
		0 -1px 0 #000,
		0 4px 10px rgba(0, 0, 0, 0.35);
}

Yugien

ポイント

• 最初の4つ → 縁取り（輪郭）
• 最後の1つ → 背景から浮かせるための影

ネオン（光って見えるやつ）

.neon {
    color: #eaffff;
    text-shadow:
        0 0 6px rgba(120, 255, 255, 0.80),
        0 0 18px rgba(120, 255, 255, 0.55),
        0 0 42px rgba(120, 255, 255, 0.35);
}

コツ：

• offset を 0 0 にして“発光”に寄せる
• ぼかしを段階的に大きく、透明度を段階的に下げる

基本形

• まずは 「これだけ覚えればOK」 の形です。
• 白背景・濃色背景どちらでも破綻しにくいです。

.textNeon {
	color: #eaf6ff;

	text-shadow:
		0 0 4px rgba(56, 189, 248, 0.8),
		0 0 10px rgba(56, 189, 248, 0.6),
		0 0 20px rgba(56, 189, 248, 0.4);
}

Yugien

ポイントは次の3つだけです。

• 影は すべて offset を 0 0
• ぼかし半径だけを段階的に大きく
• 色は 1色＋透明度違い で重ねる

ネオンを少し強くする（暗め写真・夜景向け）

「夜の写真」「暗い背景」で使うなら、外側にもう一段だけ光を足す のが安全です。

.textNeonStrong {
	color: #f0fbff;

	text-shadow:
		0 0 3px rgba(56, 189, 248, 0.9),
		0 0 8px rgba(56, 189, 248, 0.7),
		0 0 18px rgba(56, 189, 248, 0.5),
		0 0 36px rgba(56, 189, 248, 0.35);
}

Yugien

• 最外周は 薄く・広く
• 中心に近いほど 濃く・狭く

これが「ネオンっぽく見える」最大のコツです。

よくある失敗（ネオン編）

❌ offset を入れてしまう

/* NG例 */
text-shadow: 2px 2px 10px cyan;

→ 影に見えてしまい、ネオン感が消えます。

ネオンは 必ず 0 0

❌ 色を何色も混ぜる

/* NG例 */
text-shadow:
    0 0 10px red,
    0 0 20px blue;

→ チカチカして練習向きではありません

1色を透明度違いで重ねる

❌ blur が小さすぎる

/* NG例 */
text-shadow: 0 0 2px cyan;

→ ただの縁ボケ文字になります

ネオンは 10px 以上を必ず含める

浮き彫り（エンボス）／押し込み（インセット風）

文字を“凹ませたように”見せるのも多重影の得意技です。

.emboss {
    color: #666;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65),
        0 -1px 0 rgba(0, 0, 0, 0.25);
}

上方向に暗い影、下方向に明るい影…などを入れ替えると印象が変わります。

エンボス／押し込みは、text-shadow を 「明るい影」と「暗い影」 で上下（または斜め）に置いて、光源があるように見せるのが基本です。
（※ text-shadow 自体に inset は無いので、“それっぽく見せる”やり方です）

浮き彫り（エンボス：出っ張って見える）

白背景に載せても“汚れ”に見えにくい、練習向けの基本形です。

<p class="embossText">Yugien</p>

.embossText {
	color: #1a1a1a;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 0.05em;

	/* 上にハイライト、下に影 → 盛り上がって見える */
	text-shadow:
		0 -1px 0 rgba(255, 255, 255, 0.85),
		0  2px 0 rgba(0, 0, 0, 0.18);
}

見え方のコツ

• 上側に「白っぽいハイライト」
• 下側に「薄い黒の影」
• 影を濃くすると“泥っぽく”なるので、白背景では薄めが安定です

押し込み（インセット風：凹んで見える）

“へこんだ刻印”っぽい見た目です。

白背景でも成立させるために、暗い影を上に・明るい影を下に入れ替えます。

<p class="insetText">Yugien</p>

.insetText {
	color: #2a2a2a;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 0.05em;

	/* 上に暗い影、下に明るいハイライト → 押し込みっぽい */
	text-shadow:
		0  1px 0 rgba(0, 0, 0, 0.22),
		0 -1px 0 rgba(255, 255, 255, 0.75);
}

画像の上に重ねる場合（heroText と組み合わせ）

写真の上だとエンボス/押し込みは背景次第で弱く見えます。

そのため、薄い“読みやすさ用の影”を最後に1つ足すのが実務で安定します。

.heroTextEmboss {
	color: #f7fbff;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 0.06em;

	text-shadow:
		0 -1px 0 rgba(255, 255, 255, 0.55),
		0  2px 0 rgba(0, 0, 80, 0.28),
		0  6px 14px rgba(0, 0, 0, 0.35);
}

Yugien

ダークモード対応（重要）

暗背景では「白ハイライト」が強すぎたり、影が沈んだりするので、値を少し調整します。

@media (prefers-color-scheme: dark) {
	.embossText,
	.heroTextEmboss {
		color: #f3f6ff;
		text-shadow:
			0 -1px 0 rgba(255, 255, 255, 0.18),
			0  2px 0 rgba(0, 0, 0, 0.55),
			0  8px 18px rgba(0, 0, 0, 0.45);
	}

	.insetText {
		color: #e9eeff;
		text-shadow:
			0  1px 0 rgba(0, 0, 0, 0.65),
			0 -1px 0 rgba(255, 255, 255, 0.12);
	}
}

調整のコツ（迷ったらここだけ）

• 浮き彫り（エンボス）
  上：明るい（白っぽい）／下：暗い（黒 or navy寄り）
• 押し込み（インセット風）
  上：暗い／下：明るい
• どちらも 強さは「透明度」で調整すると破綻しにくい
• 1px〜2pxのズレから始める（大きくすると“影”に見えやすい）

影が「どこに」適用されるか（地味に大事）

• text-shadow は 文字 に影をつけます
• さらに 文字装飾（下線など）にも影が適用されます

「下線にも影がついて、思ったよりモコモコする」みたいなことが起きたら、ここが理由です。

“効かない/変に見える”の典型パターンと対策

影が切れる（見切れる）

親要素などに overflow: hidden（または clip 系）があると、要素の外側が表示されないので、影も一緒に切れます。

対策例：

• 影を出したい要素（または親）で overflow を見直す
• どうしても隠したいなら、影が収まるように padding を増やす

文字が太く見えたり、にじんだように見える

多重影は、特に小さいフォントサイズで“太り”やすいです。

対策：

• フォントサイズが小さいときは影を少なめに
• blur-radius を少し上げる（くっきり影より馴染む）
• 影色を完全な黒ではなく半透明に寄せる

影で読みにくくなる（本末転倒）

影は“補助”なので、やりすぎると逆効果です。

安全ライン（迷ったらここ）：

1つ影

0 1px 6px rgba(0,0,0,.35)

2つ影

薄いくっきり影 + 広いぼかし影（下の例）

CSS

.safeShadow {
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.25);
}

設計・運用のコツ

“デザインの一部”として変数化（微調整を速くする）

:root {
    --ts-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
    --ts-hard: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

.cardTitle {
    text-shadow: var(--ts-soft);
}

• サイト全体の統一感が出る
• 「全部ちょっと弱くしたい」が一括でできます

レスポンシブで“影も”調整する

モバイルの小さな文字に強い影を入れると、読みにくくなりがちです。

.heading {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

@media (max-width: 600px) {
    .heading {
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    }
}

アニメーションはほどほどに（パフォーマンス感）

影の変化は見た目が派手なわりに、端末によっては重く感じることがあります。

• ホバーで一段だけ強める、くらいが無難
• ずっと動かす演出は慎重に（特に多重影）

関連プロパティ（混同しやすいので一言で整理）

box-shadow

要素の“箱”に影（spread / inset あり）

filter: drop-shadow(...)

要素全体（画像やSVGも含む）の輪郭に沿って影

text-shadow

文字（テキスト）に影、しかも複数重ねが得意