CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

text-shadow lets you add a soft shadow or glow around text, so it’s easier to read on busy backgrounds and you can give it a nice 3D or neon look.

text-shadow

text-shadow は、文字のまわりに影や光のにじみを足して、背景がごちゃついていても文字を読みやすくしたり、立体感やネオンっぽい雰囲気を作ったりできる指定です。

Table Of Contents

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

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

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

CSS

.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 がプラス → 下へ

つまり、

CSS

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

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

逆に、

CSS

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

は「左に影」です。

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

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

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

color（色）

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

CSS

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

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

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

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

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

CSS

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

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

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

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

CSS

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

コツ：

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

HTML

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

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

CSS

.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 なのか（重要）

CSS

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

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

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

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

下に 2px

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

ぼかしは 10px と広め

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

色は rgba の黒

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

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

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

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

Yugien

CSS

.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つ目：背景全体から浮かせる影

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

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

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

CSS

@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 が使えない・使いたくない場面でも、影の多重で縁取りっぽくできます。

CSS

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

Yugien

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

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

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

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

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

CSS

.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つ → 背景から浮かせるための影

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

CSS

.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」の形です。
白背景・濃色背景どちらでも破綻しにくいです。

CSS

.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色＋透明度違いで重ねる

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

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

CSS

.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 を入れてしまう

CSS

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

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

ネオンは必ず 0 0

❌ 色を何色も混ぜる

CSS

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

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

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

❌ blur が小さすぎる

CSS

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

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

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

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

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

CSS

.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 は無いので、“それっぽく見せる”やり方です）

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

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

HTML

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

CSS

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

Yugien

見え方のコツ

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

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

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

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

HTML

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

CSS

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

Yugien

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

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

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

CSS

.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

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

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

CSS

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

設計・運用のコツ

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

CSS

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

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

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

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

CSS

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

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

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

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

FAQ

影は何個まで重ねられますか？: カンマ区切りで複数指定できます。重ねるほど表現は増えますが、やりすぎると読みにくくなったり重く感じたりするので、まずは1〜3個くらいから調整するのがおすすめです。
影の順番で見え方が変わりますか？: 変わります。最初に書いた影が一番手前（上）に描かれます。狙い通りに見えないときは順番を入れ替えてみてください。
下線にも影がつくのは仕様ですか？: はい。文字だけでなく、下線などの文字装飾にも影が適用されます。下線がモコモコする場合は、影を弱めたり、装飾の使い方を見直すと落ち着きます。
影が途中で切れて見えます: 親要素などに overflow: hidden があると、要素の外側が表示されないため影も切れます。 overflow を見直すか、影が収まるように padding を増やしてみてください。
縁取り（アウトライン）をきれいに作れますか？: できます。上下左右に小さな影を複数置くと、輪郭線っぽく見せられます。文字が小さいと太って見えやすいので、影の数と強さは控えめから試すのがコツです。

よくあるエラー早見表

影が効かない: text-shadow: none; で上書きされていないか、対象が本当にテキストか（画像や背景ではないか）を確認します。
順番を間違えて色が解釈されない: 基本は「offset-x offset-y blur color」です。まずは色を最後に置く書き方にすると混乱しにくいです。
影が切れる（見切れる）: 親要素などの overflow: hidden が原因になりやすいです。overflow の見直しや padding 追加で対処します。
影が強すぎて読みにくい: 影の数を減らす、blur-radius を上げる、影色を rgba で薄くする、の順で調整すると戻しやすいです。
小さい文字が太って見える: 多重影が原因になりがちです。小さい文字では影を1個にする、または薄い影に寄せます。

CSS

text-shadow

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

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

値の並び（重要）

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

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

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

color（色）

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

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

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

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

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

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

実務メモ（かなり大事）

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

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

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

基本形

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

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

❌ offset を入れてしまう

❌ 色を何色も混ぜる

❌ blur が小さすぎる

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

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

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

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

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

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

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

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

影が切れる（見切れる）

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

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

設計・運用のコツ

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

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

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

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

FAQ

よくあるエラー早見表