テキストシャドウジェネレーター

複数レイヤーの CSS text-shadow 効果を作成。オフセット・ぼかし・色を視覚的に調整し、CSS コードを即コピー。無料のオンラインツール。

主な機能

複数のシャドウレイヤー対応
レイヤーごとのオフセット・ぼかし・色の制御
プリセット効果（ネオン、エンボス、レトロ、3D）
編集可能なプレビューテキスト

Guide

CSS の text-shadow プロパティは、テキスト文字の背後に影のレイヤーを追加します。機能的にも装飾的にも目的を果たします：忙しい背景でのテキストの視認性の向上、奥行きと立体感の創出、ネオン発光効果の作成、レトロやヴィンテージのタイポグラフィスタイルの構築、見出しやディスプレイテキストへの繊細な仕上げの追加です。本ガイドでは、構文、レイヤー化の技法、一般的な効果、パフォーマンスの考慮事項、実用的なデザインパターンを取り上げます。 text-shadow 構文は2〜4つの値と任意の色を取ります：text-shadow: offset-x offset-y blur-radius color。offset-x 値は影を水平に動かします（正の値は右、負の値は左）。offset-y 値は影を垂直に動かします（正の値は下、負の値は上）。blur-radius 値は影の広がり具合を制御します（0 は鋭いエッジのコピーを作り、より大きい値はより柔らかい影を作ります）。color 値は影の色を設定します（省略時はテキストの色が既定）。例：text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) は下と右にずれた柔らかい暗い影を作ります。複数の影はカンマで区切られ、各影は順番にレンダリングされます（最初の影が一番上）。このレイヤー化こそが複雑な効果を可能にします。text-shadow: 1px 1px 0 #000, 2px 2px 0 #333, 3px 3px 0 #666 は増加するオフセットで3つの影レイヤーによる積み重ねられた3D効果を作ります。最初の影（テキストに最も近い）が最も暗く、後続の各影はより明るく、奥行きをシミュレートします。積み重ねられる影の数に制限はありませんが、非常に多い数（通常10〜15のぼかしレイヤー以上）では性能が低下します。 blur-radius が影のタイプを決定します。blur-radius 0 はテキストの鋭いコピーを作り、3D 押し出し効果、アウトライン、積み重ねられた影に有用です。小さい blur-radius（1〜3px）はテキストの視認性を向上させるのに適した繊細でタイトな影を作ります。中程度の blur-radius（4〜8px）は見出しの強調のための目に見えるが柔らかい影を作ります。大きい blur-radius（10〜30px）は影がテキストのアウトラインを大きく超えて広がる発光効果を作ります。非常に大きい blur-radius（40px以上）はアンビエント発光効果を作ります。ぼかしアルゴリズムはガウスぼかしで、影の強度は中心から滑らかに減衰します。視認性向上の影が最も実用的な応用です。テキストが写真、グラデーション、またはパターン化された背景の上にあるとき、繊細な影は solid な背景を追加することなく読みやすさを向上させます。変化する背景上の明るいテキストには：text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6)。変化する背景上の暗いテキストには：text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8)。重要なのは、オフセットを小さく（0〜1px）、ぼかしを柔らかく（2〜4px）保ち、影自体が視覚要素として目立たずにテキストを支えることです。この技法はヒーローセクション、バナーテキスト、画像に重ねるあらゆるテキストで広く使われています。影のオフセットの方向は光源を伝えます。右下にずれた影（正の x、正の y）は左上の光源を暗示し、UI デザインで最も一般的な習わしで、私たちが上から照らされた物理的オブジェクトをどう知覚するかと一致します。真下の影（x=0、正の y）は頭上の光源を暗示します。ページ上のすべての要素で一貫した影の方向は、統一された光源の錯覚を維持します。影の方向を混ぜる（ある要素は右に、別の要素は左に影を付ける）と視覚的不整合を生みます。ネオン発光効果は大きい blur-radius と明るい飽和した色を使います。この技法はオフセットゼロで増加する blur-radius の複数の影をレイヤー化します。基本的なネオン効果：text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa。内側の影は白（ネオン管の明るい中心をシミュレート）で、外側の影は発光色を使います。完全なネオン効果のためにテキストの色を白、背景を暗（黒に近い）に設定します。実際のネオンサインを模倣するために細いストロークのフォント（モノラインやスクリプトフォントなど）と組み合わせましょう。ネオンのちらつきは、わずかに異なる影の設定の間を切り替える CSS アニメーションで追加できます。完全な影のセットと減らしたバージョン（より少ないレイヤー、より低い blur-radius）の間を0.1〜0.5秒ごとに切り替えるキーフレームアニメーションが説得力のあるちらつきを作ります。機械的ではなく自然に感じさせるためにアニメーションのタイミングバリエーション（steps()、ランダムに見える持続時間）を加えましょう。この効果はレトロテーマのランディングページ、ゲームのインターフェース、ポートフォリオサイトで人気があります。 3D 押し出し効果は、段階的なオフセットでハードな影を積み重ねることで奥行きの錯覚を作ります。基本的な3D テキスト効果：text-shadow: 1px 1px 0 #555, 2px 2px 0 #555, 3px 3px 0 #555, 4px 4px 0 #555, 5px 5px 0 #555。各レイヤーはテキストからさらに1ピクセル離れ、押し出された外観を構築します。より洗練された効果には、後続の各レイヤーを暗くします：text-shadow: 1px 1px 0 hsl(210, 50%, 40%), 2px 2px 0 hsl(210, 50%, 35%), 3px 3px 0 hsl(210, 50%, 30%), 4px 4px 0 hsl(210, 50%, 25%)。ハードなレイヤーの後に柔らかい影（5px 5px 10px rgba(0,0,0,0.4)）を追加すれば、落とした影で3D テキストを地面に固定します。ロングシャドウ効果は3D 押し出しの概念をはるかに多くのレイヤーに拡張し、背景を横切って伸びる影を作ります。ロングシャドウは50以上のレイヤーを積み重ね、それぞれ1px ずつオフセットし、色を徐々にフェードさせることがあります。これらを手作業で生成するのは非現実的です。CSS プリプロセッサー（Sass または Less）でループを使い、プログラム的に影レイヤーを生成します。Sass では：$shadow: (); @for $i from 1 through 50 { $shadow: append($shadow, ($i * 1px $i * 1px rgba(0,0,0, 0.5 - $i * 0.01)), comma); } text-shadow: $shadow。結果はテキストの背後に斜めに伸びる劇的な影です。アウトライン（ストローク）効果は、ゼロまたは小さいオフセットで複数のハードな影を使ってテキストのアウトラインを作ります。text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 は4つの対角コーナーすべてに鋭い影を置き、テキストを1px のアウトラインで囲みます。より完全なアウトラインには、基本方向にも影を追加します：0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000。より太いアウトラインにはオフセットを2px に増やし中間位置を追加します。なお CSS にはテキストアウトライン用の -webkit-text-stroke もあり、より滑らかな結果を提供しますが WebKit/Blink ブラウザでしか動作しません。text-shadow のアプローチはより広くサポートされています。レトロやヴィンテージのテキスト効果は text-shadow を特定のフォントやカラーパレットと組み合わせます。レタープレス（エンボスが掘られた）効果は上にわずかに暗い影、下にわずかに明るい影を使います：text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3)。これを中程度のグレーの背景上のグレーのテキストに適用します。上の暗い影はテキストが表面に押し込まれていることを示し、下の明るい影は下端の光を捉えます。浮き上がった（エンボス）効果は影を逆にします：上が明るく、下が暗いです。両方の効果はより重いフォントの太さと落ち着いたカラーパレットで最も良く機能します。炎、氷、エレメンタルなテキスト効果は色のグラデーションを持つ多くの影をレイヤー化します。炎の効果は例えば：text-shadow: 0 0 4px #fefcc9, 0 -2px 6px #feec85, 0 -4px 11px #ffae34, 0 -6px 17px #ec760c, 0 -8px 22px #cd4606, 0 -10px 28px #973716, 0 -14px 40px #451b0e を使うかもしれません。各レイヤーは上に向かって（負の y オフセット）移動し増加するぼかしで、基部の明るい黄色からオレンジを経て暗赤色に移行し、炎をシミュレートします。氷の効果は同じ技法を青と白の色調で使い、影を下に向かって伸ばします。これらの装飾効果はクリエイティブプロジェクト、ゲームインターフェース、販促資料の見出しに温存するのが最善です。 text-shadow の性能は典型的なユースケース（1〜3つの影レイヤー）では一般に良好です。各影レイヤーは、ブラウザが指定された色、オフセット、ぼかしでテキストの追加コピーをレンダリングすることを要求します。ハードな影（blur-radius: 0）は単純なオフセットコピーなので安価です。ぼかされた影はブラウザが各レイヤーのガウスぼかしを計算しなければならないためより高価です。アニメーションする大きいテキストや頻繁に再描画される領域上で8個以上のぼかされた影（ネオン効果のように）を積み重ねると、低電力デバイスでフレームレートに影響できます。重い影を持つアニメーションテキストでは、対象デバイスでテストし、モバイルでは影の数を減らすことを検討しましょう。 CSS トランジションで text-shadow をアニメーションすれば魅力的なホバー効果が生まれます。よくあるパターンはホバー時に影なしから見える影へ移行します：transition: text-shadow 0.3s ease。2つの複雑な複数レイヤーの影の間のアニメーションは機能しますが、両方の状態が同じ数の影レイヤーを持つ必要があります。初期状態が3つのレイヤーでホバー状態が5つのレイヤーなら、追加のレイヤーは（フェードではなくポップインで）滑らかに補間されません。滑らかなトランジションのためにアニメーション状態間でレイヤー数を一貫させましょう。 CSS カスタムプロパティを使った text-shadow はテーマ化可能で保守しやすい効果を実現します。影をカスタムプロパティとして定義します：--shadow-heading: 2px 2px 4px rgba(0,0,0,0.3)。スタイルで参照します：text-shadow: var(--shadow-heading)。ダークモードではプロパティを再定義します：--shadow-heading: 2px 2px 8px rgba(0,0,0,0.7)（暗い背景では同じ視覚効果のために影を強める必要があります）。このアプローチは影の値を1か所に保ち、テーマ切り替えを容易にします。コンポーネントレベルの影トークンも作れます：--shadow-btn-hover、--shadow-heading-hero、--shadow-text-overlay。 text-shadow とフォント選択の関係は重要です。細い軽量フォントは上品に見える繊細な影を作ります。太いヘビーなフォントは注目を集める厚く目立つ影を作ります。スクリプトや装飾フォントは隣接する文字の影レイヤーが互いに干渉し合う乱雑な影を作ることがあります。等幅フォントは文字の幅が一定なため均一な影の間隔を作り、きれいで均等な影を作ります。影の効果を実際のフォントで実際のサイズでテストしましょう。見本の単語で素晴らしく見える効果が完全な文では乱雑に見えることがあります。異なる背景タイプ上の text-shadow は異なるアプローチを必要とします。solid な背景では完全に制御でき任意の影の技法を使えます。グラデーション背景では、影の色がグラデーション範囲全体で機能することを確認しましょう。画像上では、テキストの背後の画像のどの部分が来てもコントラストを作る影を使います（視認性の影のアプローチがここで最も機能します）。透明または半透明の背景（グラス効果）では、背景色が変化するため、読みやすさの維持に text-shadow がしばしば不可欠です。暗い背景にはより明るい影の色や発光効果を使いましょう。明るい背景には標準的な暗い影を使います。 text-shadow は text-decoration と特定の方法で相互作用します。下線、上線、取り消し線は影を受け取りません。影は字形自体にのみ適用されます。影付きテキストと影付き下線が必要な場合は、下線に疑似要素や border-bottom を使い、独自の box-shadow を適用します。同様に、text-shadow は選択ハイライトの色（::selection 疑似要素）に影響しません。影は選択されたテキストの背後に見えたままで、特定の色の組み合わせで奇妙な視覚効果を生むことがあります。レスポンシブデザインの text-shadow はフォントサイズとともに拡大縮小すべきです。48px の見出しで適切に見える2px の影は、モバイルの24px の見出しでは不釣り合いに大きくなります。比例した拡大縮小を維持するために px ではなく em 単位を影の値に使いましょう：text-shadow: 0.04em 0.04em 0.08em rgba(0, 0, 0, 0.3)。この影はフォントサイズに合わせて拡大縮小し、実際のレンダリングサイズに関わらず同じ視覚的比率を維持します。レスポンシブユーティリティクラスには、異なる見出しレベル用の影バリアントを定義しましょう。 CSS text-shadow と SVG テキスト効果や canvas テキストレンダリングの比較は、機能と性能が異なります。SVG はテキスト要素に適用されるフィルター、マスク、グラデーション、パターンを通じてより洗練されたテキスト効果を提供します。Canvas は shadowBlur、shadowColor、shadowOffsetX/Y プロパティでテキストレンダリングのピクセルレベルの制御を提供します。CSS text-shadow はウェブテキストのための最もシンプルで高性能な選択肢です。標準的な影効果には CSS を使いましょう。CSS の影が提供する以上の効果が必要なときに SVG を使いましょう。Canvas はチャートやビジュアライゼーションのような動的でデータ駆動のテキストレンダリングに適しています。 text-shadow を他の CSS テキストプロパティと組み合わせればレイヤー化された効果が生まれます。text-shadow に background-clip: text（-webkit-background-clip: text とともに）とグラデーション背景を加えれば、グラデーションの塗りと影を持つテキストが生まれます。親要素に text-shadow と mix-blend-mode を加えれば、影がブレンドモードに基づいて背景と相互作用するブレンドされた影効果が生まれます。親に text-shadow と filter: drop-shadow() を加えれば、影付きテキストの影を作り、奥行き効果を倍にします。これらの組み合わせは強力ですが、サポートが異なるためブラウザ間でのテストが必要です。メールクライアントでの text-shadow は限定的だが有用なサポートがあります。ほとんどのモダンなメールクライアント（Gmail、Apple Mail、Mac 向け Outlook、Yahoo Mail）は基本的な text-shadow をサポートします。Windows 向け Outlook（Word のレンダリングエンジンを使用）は text-shadow をサポートしません。メールデザインでは、text-shadow をプログレッシブエンハンスメントとして使いましょう：なくても良く見え、あればさらに良く見えるようにします。ウェブでは素晴らしく見える複数レイヤーの影はメールクライアントでは予測不能にレンダリングされることがあるため、効果はシンプルに（単一レイヤー、小さいオフセット、控えめなぼかし）保ちましょう。印刷用スタイルシートでは通常 text-shadow を除去すべきです。影は画面上では視覚的な重みを加えますが、特にインクジェットプリンターでは印刷時に泥臭く見えることがあります。@media print { * { text-shadow: none; } } を使い、印刷出力ですべてのテキストシャドウを除去しましょう。特定の影が印刷で機能的役割を果たす場合（着色された背景でのテキストのコントラスト確保など）、装飾的な影を除去しながらそれらを選択的に温存します。 text-shadow のブラウザレンダリングの違いは小さいですが存在します。Chromium ベースのブラウザ、Firefox、Safari はすべて同じ構文で text-shadow をサポートしますが、ぼかしのレンダリングがわずかに異なることがあります。Firefox は同じ値でも Chrome よりタイトな blur-radius を生む傾向があります。Safari は極端な大きいぼかし値を極端な領域で異なる扱いをすることがあります。これらの違いは実用ではめったに目立ちませんが、ピクセルパーフェクトなデザインでは重要になり得ます。正確な影の見た目が重要な場合、すべての対象ブラウザでテストし、CSS 機能クエリや最後の手段としてユーザーエージェント検出でブラウザごとに値を調整しましょう。 CSS フレームワークでの text-shadow の性能はユーティリティクラスで管理できます。Tailwind CSS は box-shadow に適切に機能する影ユーティリティを提供しますが、text-shadow にはカスタム設定が必要です。Tailwind の設定に text-shadow ユーティリティを追加しましょう：テーマを textShadow 値で拡張し、対応するユーティリティクラスを生成するプラグインを作ります。これにより text-shadow-sm、text-shadow-md、text-shadow-lg、text-shadow-glow のようなクラスが得られ、繰り返しのインラインスタイルなしにプロジェクト全体で一貫性を維持できます。 text-shadow の値をプログラム的に生成することは、多くのレイヤーを持つ効果に必要です。3D 押し出し効果を生成する JavaScript 関数：const layers = Array.from({length: depth}, (_, i) => (i+1) + 'px ' + (i+1) + 'px 0 ' + color).join(', ')。ネオン効果には、増加するぼかしで同心円状の発光レイヤーを生成する関数を使えます：const glow = radii.map(r => '0 0 ' + r + 'px ' + color).join(', ')。これらの生成値を CSS カスタムプロパティ（--shadow-3d、--shadow-neon）に格納すれば、JavaScript が複雑な生成ロジックを処理する間、CSS をきれいに保てます。バリアブルフォントを使った text-shadow は興味深い可能性を生みます。バリアブルフォントは滑らかなウェイトの移行を許すため、アニメーションする font-weight と対応してアニメーションする text-shadow を組み合わせれば、同時に重くなり、より深い影を落とすように見えるテキストが生まれます。両方のプロパティを CSS トランジションまたはアニメーションに設定します：font-weight を400から700に移行させながら text-shadow を1px 1px 2px rgba(0,0,0,0.2) から2px 2px 6px rgba(0,0,0,0.4) に移行させれば、まとまりのあるウェイトと奥行きのアニメーションが生まれます。 text-shadow のアクセシビリティの考慮事項は単純です：影はテキストの読みやすさを低下させてはなりません。よくある間違いは、コントラストを影に頼るテキスト色を使うことです。影のレンダリングに失敗した場合（古いメールクライアント、一部のアクセシビリティツール、印刷スタイルシート）、テキストは単独で背景に対して読めなければなりません。text-shadow で読みやすさを高め、それを作らないようにしましょう。基本のテキスト色は、影とは独立して背景に対して WCAG のコントラスト要件を満たすべきです。Windows のハイコントラストモードは text-shadow を完全に除去するため、なしでも機能するデザインにしなければなりません。 text-shadow 生成ツールを使えば、複数の影レイヤーを視覚的に追加、削除、設定でき、各レイヤーのオフセット、ぼかし、色を調整しながらリアルタイムで結果を見られます。この視覚的アプローチは、複数レイヤーの影を手作業でコード化するより速く、特にレイヤー間の相互作用が最終的な見た目を決めるネオン発光や3D 押し出しのような複雑な効果に有用です。生成された CSS をスタイルシートにコピーし、特定のコンテキストに合わせて必要に応じて調整しましょう。

よくある質問

複数の text-shadow を追加できますか？

はい。シャドウレイヤーは無制限に追加できます。各レイヤーに独自のオフセット・ぼかし半径・色を設定できます。

text-shadow はパフォーマンスに影響しますか？

text-shadow はモダンブラウザで GPU アクセラレーションされ、通常の利用では影響はごくわずかです。