CSSで文字に影をつける方法｜text-shadowコピペ集10選
生徒text-shadowで文字に影をつけたいんですが、値の意味がよく分からなくて…
ペン博士大丈夫、引数は「横・縦・ぼかし・色」の4つだけだよ。組み合わせれば縁取りやネオン発光まで作れる。今日はコピペで使えるパターンを10種類以上渡すね。
文字に影をつけるだけで、見出しやボタンのデザインが一気にプロフェッショナルな印象になります。CSSのtext-shadowプロパティを使えば、基本的な影からネオン発光・縁取り文字（袋文字）・エンボス効果まで幅広い表現が可能です。
しかし「どう書けばいいかわからない」「思ったような影にならない」という声もよく聞きます。text-shadowは引数の順番や複数指定の方法を理解していないと、思い通りの効果が出ません。
この記事ではtext-shadowの基本構文から始まり、コピペしてすぐ使える10種類以上のデザインサンプルを紹介します。filter: drop-shadow()との違いやパフォーマンスの考慮点まで含めて解説するので、これ一記事でtext-shadowをマスターできます。
- text-shadowの基本構文（x・y・ぼかし・色の意味）
- 基本の影・長い影・ソフトシャドウなどの定番スタイル
- 複数の影を重ねて縁取り（袋文字）を作る方法
- ネオン発光・グロウエフェクトの実装
- エンボス・凹みエフェクトの作り方
- 背景画像の上で文字を見やすくするテクニック
- filter: drop-shadowとの違いと使い分け
- パフォーマンスへの影響と最適化
目次
text-shadowの基本構文
まずはtext-shadowの基本的な書き方を押さえましょう。すべての値の意味を理解しておくことで、思い通りのデザインが作れるようになります。
/* text-shadowの基本構文 */
text-shadow: x軸のずれ y軸のずれ ぼかし半径 色;
/* 例：右下に4px・ぼかし6pxの灰色の影 */
text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
各引数の意味は以下の通りです。
| 引数 | 意味 | 例 |
|---|---|---|
| x軸のずれ（必須） | 影の水平方向のずれ。正の値で右、負で左 | 4px / -4px |
| y軸のずれ（必須） | 影の垂直方向のずれ。正の値で下、負で上 | 4px / -4px |
| ぼかし半径（省略可） | 影のぼかし量。0にすると輪郭のくっきりした影 | 6px / 0 |
| 色（省略可） | 影の色。省略すると文字色と同じになる | rgba(0,0,0,0.4) / #333 |
ぼかし半径を0にするとシャープな縁取りに、大きくするほどソフトな発光っぽい影になります。色にrgba()を使って透明度を設定することで、自然に馴染む影を作れます。
基本の影スタイル
1. 定番の右下ドロップシャドウ
最もよく使われる基本スタイルです。見出しに立体感を持たせます。
/* 定番の右下ドロップシャドウ */
.shadow-basic {
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.35);
color: #333;
}
/* さらに自然な影（ぼかしを強くして薄く） */
.shadow-natural {
text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25);
}
2. ソフトシャドウ（淡い影）
コーポレートサイトや記事サイトの見出しに合う上品な影です。
/* ソフトで上品なシャドウ */
.shadow-soft {
color: #2c2c2c;
text-shadow:
1px 1px 3px rgba(0, 0, 0, 0.15),
0px 2px 6px rgba(0, 0, 0, 0.1);
}
3. 長い影（Long Shadow）
影を長く伸ばしてフラットデザインに立体感を加えるスタイルです。複数のtext-shadowを重ねて作ります。
/* ロングシャドウ（斜め下に長く伸びる影） */
.shadow-long {
color: #e74c3c;
font-size: 3rem;
font-weight: 700;
text-shadow:
1px 1px 0 rgba(0, 0, 0, 0.3),
2px 2px 0 rgba(0, 0, 0, 0.28),
3px 3px 0 rgba(0, 0, 0, 0.26),
4px 4px 0 rgba(0, 0, 0, 0.24),
5px 5px 0 rgba(0, 0, 0, 0.22),
6px 6px 0 rgba(0, 0, 0, 0.20),
7px 7px 0 rgba(0, 0, 0, 0.18),
8px 8px 0 rgba(0, 0, 0, 0.16),
9px 9px 0 rgba(0, 0, 0, 0.14),
10px 10px 0 rgba(0, 0, 0, 0.12);
}
4. 複数方向への影（立体感アップ）
上下左右に微妙な影を付けることで、より自然な立体感が生まれます。
/* 複数方向に影を重ねて自然な立体感 */
.shadow-3d {
color: #ffffff;
background: #3498db;
padding: 10px 20px;
text-shadow:
0 1px 0 #1a6fa8,
0 2px 0 #1760a3,
0 3px 0 #145ea3,
0 4px 0 rgba(0, 0, 0, 0.2),
0 5px 6px rgba(0, 0, 0, 0.3);
}
縁取り文字（袋文字）の作り方
文字の周囲をアウトラインで縁取りする「袋文字」はtext-shadowだけでも実現できます。上下左右4方向にぼかし0の影を同じ色で付けるのが基本です。
5. シンプルな黒縁取り
/* 基本の黒縁取り（4方向） */
.stroke-black {
color: #ffffff;
font-size: 2.5rem;
font-weight: 700;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
}
/* より太い縁取り（8方向で滑らかに） */
.stroke-thick {
color: #fff;
text-shadow:
-3px -3px 0 #000,
0px -3px 0 #000,
3px -3px 0 #000,
-3px 0px 0 #000,
3px 0px 0 #000,
-3px 3px 0 #000,
0px 3px 0 #000,
3px 3px 0 #000;
}
6. カラフルな縁取り
/* ピンクの縁取りに白い文字 */
.stroke-pink {
color: #ffffff;
font-size: 2rem;
font-weight: 900;
text-shadow:
-2px -2px 0 #d16176,
2px -2px 0 #d16176,
-2px 2px 0 #d16176,
2px 2px 0 #d16176,
0px -2px 0 #d16176,
0px 2px 0 #d16176,
-2px 0px 0 #d16176,
2px 0px 0 #d16176;
}
/* 縁取り＋ドロップシャドウの組み合わせ */
.stroke-with-shadow {
color: #ffffff;
text-shadow:
-2px -2px 0 #333,
2px -2px 0 #333,
-2px 2px 0 #333,
2px 2px 0 #333,
4px 6px 8px rgba(0,0,0,0.5); /* 影も追加 */
}
本来の縁取り文字はSVGの-webkit-text-strokeプロパティが理想的です。text-shadowによる縁取りは手軽ですが、太くなるにつれてコーナーが丸まる傾向があります。より綺麗な縁取りには-webkit-text-strokeを検討してください。
/* -webkit-text-strokeによる縁取り（よりシャープ） */
.stroke-webkit {
color: #ffffff;
-webkit-text-stroke: 2px #333;
text-stroke: 2px #333;
/* ただし文字の内側に向かって縁が付く点に注意 */
}
ネオン発光・グロウエフェクト
ネオンサイン風の発光エフェクトはダークテーマのサイトやゲーム系・エンターテインメント系のデザインで人気があります。鮮やかな色にぼかし半径を大きくした影を複数重ねることで、光が滲むような表現ができます。
7. シアン色のネオン発光
/* ネオン発光（シアン） */
.neon-cyan {
color: #00f5ff;
text-shadow:
0 0 5px #00f5ff,
0 0 10px #00f5ff,
0 0 20px #00f5ff,
0 0 40px #0ff,
0 0 80px #0ff,
0 0 90px #0ff;
font-size: 2.5rem;
font-weight: 700;
letter-spacing: 0.1em;
}
/* ネオン発光（ピンク） */
.neon-pink {
color: #ff6ec7;
text-shadow:
0 0 5px #ff6ec7,
0 0 10px #ff6ec7,
0 0 20px #ff6ec7,
0 0 40px #ff00a0,
0 0 80px #ff00a0,
0 0 90px #ff00a0;
}
8. 点滅アニメーション付きネオン
/* 点滅アニメーション付きネオン */
@keyframes neon-flicker {
0%, 18%, 22%, 25%, 53%, 57%, 100% {
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #0ff,
0 0 80px #0ff,
0 0 90px #0ff;
}
20%, 24%, 55% {
text-shadow: none;
}
}
.neon-flicker {
color: #fff;
animation: neon-flicker 3s infinite;
}
9. ゴールド系グロウエフェクト
/* ゴールドのグロウエフェクト（高級感のある表現） */
.glow-gold {
color: #ffd700;
font-size: 2rem;
font-weight: 700;
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #ffd700,
0 0 82px #ffd700,
0 0 92px #ffd700,
0 0 102px #ffd700;
}
/* ソフトなホワイトグロウ（白背景では控えめに） */
.glow-soft {
color: #3498db;
text-shadow:
0 0 8px rgba(52, 152, 219, 0.8),
0 0 16px rgba(52, 152, 219, 0.4);
}
エンボス・凹みエフェクト
エンボス（凸）と凹み（デボス）エフェクトはUIデザインに質感を加えます。背景と文字色を近い色にし、ハイライトとシャドウを上下に付けることで錯視的な立体感が生まれます。
10. エンボス（凸）テキスト
/* エンボス（凸）テキスト */
.emboss {
color: #c0b090; /* 背景に近い色にする */
font-size: 2.5rem;
font-weight: 700;
background: #c0b090; /* 同じ系色の背景 */
padding: 20px;
text-shadow:
-1px -1px 2px rgba(255, 255, 255, 0.9), /* 上・左：明るいハイライト */
1px 1px 2px rgba(0, 0, 0, 0.4); /* 下・右：暗いシャドウ */
}
/* エンボス（暗い背景向け） */
.emboss-dark {
color: #666;
background: #555;
padding: 20px;
text-shadow:
1px 1px 2px rgba(255, 255, 255, 0.15),
-1px -1px 2px rgba(0, 0, 0, 0.8);
}
11. 凹み（デボス）テキスト
/* 凹み（デボス）テキスト */
.deboss {
color: #a09070;
font-size: 2.5rem;
font-weight: 700;
background: #c0b090;
padding: 20px;
text-shadow:
1px 1px 2px rgba(255, 255, 255, 0.9), /* エンボスと逆方向 */
-1px -1px 2px rgba(0, 0, 0, 0.4);
}
背景画像の上で文字を読みやすくする
ヒーロービジュアルなど背景画像の上に文字を乗せる場合、コントラスト不足で読みにくくなることがあります。text-shadowを使って可読性を高めるテクニックを紹介します。
12. テキストシャドウで可読性向上
/* 背景画像上の白文字に黒のシャドウで可読性を確保 */
.readable-on-image {
color: #ffffff;
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.8),
0 2px 6px rgba(0, 0, 0, 0.6),
0 4px 12px rgba(0, 0, 0, 0.4);
}
/* 複数の影で背景色に依存しない可読性確保 */
.readable-any-bg {
color: #ffffff;
text-shadow:
0 0 10px rgba(0, 0, 0, 0.9),
0 0 20px rgba(0, 0, 0, 0.6),
0 0 40px rgba(0, 0, 0, 0.4);
}
/* キャプション：暗い背景に白文字（画像の下部など） */
.caption-on-dark-area {
color: #fff;
font-size: 1rem;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}
デザイン別text-shadow一覧
| デザイン名 | 用途 | ポイント |
|---|---|---|
| 基本ドロップシャドウ | 見出し・ボタン全般 | rgba透明度で自然に |
| ソフトシャドウ | コーポレート・記事 | 小さいぼかし＋薄い透明度 |
| ロングシャドウ | フラットデザイン見出し | 1px刻みで影を積み重ねる |
| 3D立体 | タイトル・ロゴ | 下方向に色を変えながら積む |
| 縁取り（袋文字） | 画像上テキスト・タイトル | 4〜8方向にぼかし0で指定 |
| ネオン発光 | ダークテーマ・ゲーム系 | x=0 y=0で複数ぼかしを重ねる |
| エンボス | UI・ボタン・ラベル | 背景と近い色＋明暗を逆に付ける |
| 凹み（デボス） | UI・刻印系デザイン | エンボスの明暗を反転させる |
| 背景画像可読性向上 | ヒーロー・バナー | ぼかしを大きめに・黒系の影 |
| ゴールドグロウ | 高級感・アワード系 | 金色＋白＋大きめぼかしを重ねる |
filter: drop-shadow() との違いと使い分け
CSSで影をつける方法にはtext-shadow以外にfilter: drop-shadow()があります。似ているように見えますが、適用対象と用途が異なります。
text-shadow vs filter: drop-shadow()
| プロパティ | 適用対象 | 特徴 |
|---|---|---|
| text-shadow | テキスト専用 | 文字の形に合わせた影。高速 |
| filter: drop-shadow() | 要素全体（画像・SVG・PNG等） | 透明部分を除いた実際の形状に影。重い |
| box-shadow | ボックス（要素の矩形） | 要素の矩形に対して影。テキストには適さない |
/* text-shadow：テキストのみに影 */
.text-only {
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}
/* filter: drop-shadow()：要素全体（SVGアイコン、透過PNGなど）に影 */
.svg-icon {
filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
}
/* drop-shadowはSVGパスの形に沿って影が付く */
.logo-png {
filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
/* PNG画像の透明部分は除かれ、実際の形状に影が付く */
}
/* テキストに対してfilter: drop-shadow()を使うことも可能 */
.text-with-filter {
/* text-shadowとの違い：文字以外の要素（アイコン等）が同じ要素内にあれば全部に影が付く */
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}
テキストだけに影を付けるならtext-shadowが最適です。SVGアイコンや透過PNG画像のシルエットに沿って影を付けたい場合はfilter: drop-shadow()を使います。filter: drop-shadow()はGPUレンダリングが絡むため、多用するとパフォーマンスに影響することがあります。
パフォーマンスへの影響と最適化
text-shadowはCSSレンダリングコストが比較的高い部類のプロパティです。特に以下のケースでは注意が必要です。
パフォーマンス上の注意点
- 影の数が多いほどレンダリングコストが上がる（ネオン発光のような多重影は特に注意）
- ぼかし半径が大きいほど計算コストが増える
- アニメーションと組み合わせると再レンダリングが発生しやすい
- 多数の要素に同時に適用するとスクロール時にカクつく場合がある
パフォーマンス改善のテクニック
/* will-changeでレンダリングをGPUに移譲（アニメーション時に有効） */
.animated-text {
will-change: text-shadow;
text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
transition: text-shadow 0.3s ease;
}
.animated-text:hover {
text-shadow:
0 0 10px #0ff,
0 0 20px #0ff;
}
/* ネオン発光はアニメーションさせる要素を最小限に */
/* クラスで制御してJavaScriptで必要時だけ適用 */
/* 多数の要素に使うのではなく、目立たせたい見出しだけに限定する */
.section-hero h1 {
text-shadow: 0 0 20px rgba(0,200,255,0.8);
}
/* スクロールアニメーション等と組み合わせる場合はtransform/opacityで代替を検討 */
パフォーマンスに敏感なプロジェクト（スマートフォン対応が重要なサイトなど）では、ネオン発光のような多重影は使用箇所を絞りましょう。基本的なドロップシャドウは影響が少なく、広く使っても問題になりにくいです。
アニメーションと組み合わせた応用例
/* ホバーでシャドウを変化させる */
.hover-shadow {
color: #333;
text-shadow: none;
transition: text-shadow 0.3s ease, color 0.3s ease;
}
.hover-shadow:hover {
color: #d16176;
text-shadow:
2px 2px 4px rgba(209, 97, 118, 0.5),
0 0 8px rgba(209, 97, 118, 0.3);
}
/* フォーカス時に発光（アクセシビリティ向上） */
.focus-glow:focus {
outline: none;
text-shadow:
0 0 5px rgba(0, 120, 255, 0.8),
0 0 10px rgba(0, 120, 255, 0.5);
}
/* キーフレームでパルス効果 */
@keyframes pulse-glow {
0%, 100% {
text-shadow: 0 0 5px rgba(209, 97, 118, 0.5);
}
50% {
text-shadow:
0 0 10px rgba(209, 97, 118, 0.9),
0 0 20px rgba(209, 97, 118, 0.6);
}
}
.pulse-text {
color: #d16176;
animation: pulse-glow 2s ease-in-out infinite;
}
用途別text-shadowコピペまとめ
ここまで紹介したスタイルを用途別に整理します。コピペしてすぐ使えます。
/* === 用途別text-shadowコレクション === */
/* コーポレート・ブログ向け（上品・控えめ） */
.style-corporate {
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15);
}
/* バナー・LP見出し（インパクト重視） */
.style-banner {
text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25), 5px 5px 10px rgba(0, 0, 0, 0.2);
}
/* 画像の上の文字（可読性優先） */
.style-on-image {
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 3px 10px rgba(0,0,0,0.6);
}
/* 縁取り（袋文字）スタイル */
.style-stroke {
color: #fff;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
/* ネオン（ダークテーマ） */
.style-neon {
color: #0ff;
text-shadow: 0 0 5px #0ff, 0 0 15px #0ff, 0 0 30px #0ff, 0 0 60px #00cfcf;
}
/* エンボス（グレー背景UI） */
.style-emboss {
color: #888;
text-shadow: -1px -1px 1px rgba(255,255,255,0.8), 1px 1px 1px rgba(0,0,0,0.3);
}
/* ロングシャドウ（フラットデザイン） */
.style-long-shadow {
color: #e74c3c;
text-shadow:
1px 1px 0 rgba(0,0,0,.25), 2px 2px 0 rgba(0,0,0,.22),
3px 3px 0 rgba(0,0,0,.20), 4px 4px 0 rgba(0,0,0,.18),
5px 5px 0 rgba(0,0,0,.16), 6px 6px 0 rgba(0,0,0,.14),
7px 7px 0 rgba(0,0,0,.12), 8px 8px 0 rgba(0,0,0,.10);
}
まとめ
text-shadowは「X軸・Y軸・ぼかし・色」の4つの値で影を表現します。ポイントは①複数の影をカンマで重ねられる②縁取り（袋文字）は4〜8方向に影を置く③ネオンやエンボスも影の重ね方で作れる、の3点。用途別に10種類以上を用意したので、見出しやボタンのデザインにコピペして使ってください。
よくある質問（FAQ）
text-shadowはすべてのブラウザで使えますか？
はい、text-shadowはほぼすべての現代ブラウザ（Chrome・Firefox・Safari・Edge）でベンダープレフィックスなしで使用できます。Can I Useによる対応状況は98%以上です。IE9以前は非対応でしたが、現在はIEのサポートが終了しているため気にする必要はありません。
text-shadowの影を複数付けるにはどうすればいいですか？
カンマで区切って複数の影を並べます。書いた順に下のレイヤーから重なります（最初に書いたものが一番手前）。例：text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 2px 2px 4px rgba(0,0,0,0.5);のように3つ以上でも指定できます。
文字色と影色を同じにする意味はありますか？
同じ色で方向だけ変えることで、グロウ効果（光が滲む表現）が生まれます。特にネオン発光では文字色と影色を同系色にして複数のぼかし半径を重ねることが定番です。また、エンボス・デボスでは背景と同系色の文字に明暗を付けることで立体感を出します。
text-shadowとbox-shadowの違いはなんですか？
text-shadowは文字のグリフ（字形）に直接影を付けるプロパティです。box-shadowは要素のボックス（矩形の輪郭）に影を付けます。文字に影を付けたいならtext-shadow、ボタンや画像のカードに影を付けたいならbox-shadowを使います。
ネオン発光のアニメーションがスマートフォンで重いです。改善方法はありますか？
多重text-shadowはGPU描画コストが高く、スマートフォンでカクつく原因になります。対策として、①影の数を減らす（3〜4個程度に限定）、②ぼかし半径を小さくする、③will-change: text-shadowを指定してGPUレイヤーに移譲する、④スマートフォンでは@media (prefers-reduced-motion: reduce)でアニメーションを止める、といった方法が有効です。
あわせて読みたい関連記事
CSS・Webデザイン実装の総まとめ
CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。
AIスキルで、未来の自分をアップデート！
今なら完全無料でAIを学べる！
- 動画や実践で楽しく学べる：初心者でも安心のカリキュラム
- スマホ・PCどちらでもOK：好きな時間に学習できる
- 料金は一切ナシ：0円でAIスキルが身につく
目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。
会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！
