CSS text-shadowジェネレーター

Q: ブラウザがレンダリングするシャドウ レイヤーの最大数はいくつですか?

ブラウザーは、text-shadow 値内のカンマ区切りのシャドウの数にハードキャップを設けません。 実際の上限は現実的です。ペイントのコストはレイヤーごとに上昇しますが、ほとんどのジェネレーターでは上限が 8 ～ 10 程度です。

Q: Text-Shadow はすべてのブラウザでアルファ透明度をサポートしていますか?

はい。アルファ透明度は同じ色の構文の一部であるため、text-shadow をサポートするすべてのブラウザは、 その中のrgba および hsla 値もサポートします。 1 つの例外は Internet Explorer 9 以前であり、このプロパティはまったくサポートされていませんでした。

Q: Text-Shadow は背景画像に適用できますか、それともテキストのみに適用できますか?

Text-shadow は、実際のテキスト ノードのグリフのみをシェーディングします。 背景画像、SVG 形状、要素のボックスには影響しません。 背景画像をシェーディングするには、代わりにドロップシャドウ フィルタが必要になります。このフィルタは、境界ボックスではなく画像の実際のアルファ形状に従います。

Q: 生成された値は、Sass Mixin、Tailwind、または Bootstrap ユーティリティ クラスとして再利用できますか?

はい。生成された text-shadow 値は、変数として Sass mixin にドロップされるか、設定ファイル内のカスタム Tailwind (EN) ユーティリティ クラスにドロップされます。 ブートストラップ (EN) には text-shadow ユーティリティが付属していないため、そのプロジェクトには小さなカスタム クラスが必要です。

こんにちは

プリセット

タイポグラフィ

フォント

文字サイズ

文字の太さ

文字間隔 0px

行の高さ 1.3

文字色

影のレイヤー

⠿ Drag the handle on the left of each layer to reorder

生成されたCSS

Bogdan Sandu (EN) 著 · 公開 2026 年 4 月 27 日 · 最終更新日 2026 年 9 月 13 日

このCSSテキストシャドウ生成ツールでは、コードを1行も書かずに、文字の影の効果をブラウザ上でデザインして書き出せます。

視覚的に影を構築します。すべてのパラメータをリアルタイムで調整し、プレビューが即座に更新されるのを確認します。

できること:

複数のシャドウレイヤーを追加して積み重ねて、複雑で多次元の効果を作成します。
レイヤーごとに水平オフセット、垂直オフセット、ぼかし、広がり、不透明度、カラーを制御します。
レイヤーをドラッグして並べ替えて、レイヤーの重なり方を変更します。
ネオングロー、ファイア、エンボス、レトロハードなどを含む 8 つの内蔵プリセット から選択します。
任意の背景色またはチェッカーボードに対してデザインをテストします（透明度テスト用）。
フォントファミリー、サイズ、太さ、文字間隔、行の高さ、テキストの色を調整します。
結果を完全な CSS ルール、裸の text-shadow 値、またはTailwind の任意のクラスとしてコピーします。

text-shadow にはネイティブのスプレッドサポートがないため、スプレッドスライダーはレイヤードシャドウオフセットを使用して CSS スプレッド効果をシミュレートします。

依存関係はありません。インストールは不要です。 出力をスタイルシートに直接貼り付けます。

CSS テキストシャドウジェネレーターとは何ですか?

CSS テキストシャドウジェネレーターは、手動で入力した構文の代わりに、スライダー、カラーピッカー、ライブプレビューを通じてテキストシャドウ値を構築するブラウザーベースのツールです。

これは、css (EN) ツールのより広い世界の内部にあり、グラデーション、境界線、アニメーションのジェネレーターの隣にあります。

水平オフセット、垂直オフセット、ぼかし半径、色を入力すると、ツールはサンプルテキストにリアルタイムで効果をレンダリングします。

ジェネレーターと単なるリファレンスページの違いは 2 つあります。

値の変更に応じて更新されるライブプレビューペイン
フォーマット済みで構文が正しい、すぐにコピーできる CSS コードスニペット

最初の試行では、オフセット x、オフセット y、ブラー半径、色の正確な順序を覚えている人は誰もいません。これらのツールが存在する理由はまさにそれです。

CSS Text-Shadow プロパティはどのように機能しますか?

css3 の text-shadow プロパティは、offset-x、offset-y、blur-radius、color の 4 つの部分から構成されるカンマ区切りの値を受け取ります。

Offset-x は影を左または右に移動します。 Offset-y はそれを上下に移動します。

いずれかの軸に負の値を指定すると、方向が反転します。正の offset-x はシャドウを右に押し、負の offset-x は左に引っ張ります。

ぼかし半径は、シャドウエッジの見た目の柔らかさを制御します。

シャープでエッジの効いたテキストの複製を作成するには、これを 0 に設定します。より高く押すと、エッジが広がってフェードします。基本的に、これがグローエフェクトの構築方法です。

4 つの部分を必要な順序で並べます:

オフセット-x (必須)
オフセット-y (必須)
Blur-radius (オプション、デフォルトは 0)
color (オプション、デフォルトは currentColor)

スタイルシートでは、単一の影は次のようになります。

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

MDN Web ドキュメント (EN) には、これと同じ 4 部構成の順序が公式リファレンスに記載されています。その背後にある仕様は、CSS ワーキンググループによって維持されており、CSS テキストデコレーションモジュールレベル 3 (EN) です。

この物件には奇妙な歴史があります。これは最初に CSS2 に登場し、CSS2.1 から完全に削除されましたが、その後 CSS3 の同じテキスト装飾モジュールの下に戻ってきました。

複数のテキストシャドウを重ねて奥行きと輝きを持たせるにはどうすればよいですか?

複数の text-shadow 値は単一のカンマ区切りリストにスタックされ、それぞれがテキストの背後に独自のレイヤーとしてレンダリングされます。

リストの最初の影はテキストに最も近い位置にあります。レンダリング後に書き込まれるすべてのシャドウは、表示される順序でさらに後方に描画されます。

深層化

深度効果では、オフセットを増加させた複数のシャドウと固定の暗い色を使用するため、各レイヤーは最後のレイヤーよりもわずかに離れてスタックされます。

text-shadow:
  0.1em 0.1em 0 #ccc,
  0.2em 0.2em 0 #999,
  0.3em 0.3em 0 #666;

各レイヤーは 1 つずつ外側に位置し、それが階段状の押し出された外観を作成します。

グローレイヤリング

グローエフェクトはオフセットを完全にスキップし、代わりにブラーをスタックします。

一般的なネオンの輝きでは、すべて 0 0 の 3 つまたは 4 つのシャドウが使用され、それぞれにぼかし半径が上昇し、シアンやマゼンタなどの飽和した色が使用されます。

一部のエフェクトでは、互いにわずかに離れて設定された対照的な色のレイヤードシャドウを使用してこれをさらに推し進めます。これが、グリッチテキストの外観の背後にある基本的な仕組みです。

レイヤーを重ねすぎると、低電力デバイスでの再描画が遅くなります。ほとんどのジェネレーターは、コストに見合った効果が得られなくなる前に、シャドウ数を 5 ～ 8 程度に制限します。

Text-Shadow 値で最適に機能するカラー形式はどれですか?

Text-shadow は、残りの CSS と同じカラー形式 (hex、rgba、hsla) を受け入れます。

形式	例	適した用途
16進数	#1a1a1a	平らで不透明な影
Rgba	rgba(0,0,0,0.6)	半透明のソフトエッジ
ハスラ	hsla(200,80%,50%,0.5)	色相ベースのグロー効果

六角形は、見出しの後ろにあるハードドロップシャドウなど、シャドウを完全に不透明にしておく必要がある場合にうまく機能します。

Rgba はアルファチャネルを追加します。これにより、シャドウが平らな色のブロックとして背景に留まるのではなく、背景にフェードインします。

デザインシステムから 16 進数のスウォッチが渡され、ジェネレーターが rgba を必要とする場合、この 2 つの切り替えは、rgb から 16 進数へのコンバータを使用するワンステップの作業です。

Hsla は rgba のように動作しますが、色相と彩度を直接公開するため、固定されたスウォッチを探すのではなくカラーホイール上をスライドするため、ネオンやグローの作業が高速化されます。

hsl ベースのパレットから値を取り出すには、最初に hsl から rgb へのコンバータを介して値を実行する必要がある場合があります。

ここで重要な役割を果たすのがアルファチャンネルです。透明度を10%または20%に下げた同じ影と比べると、不透明度が最大の影は平板で、やや不自然に見えます。

CSS テキストシャドウ vs ボックスシャドウ vs ドロップシャドウフィルター: 違いは何ですか?

Text-shadow は、テキスト自体のグリフの輪郭をシェーディングします。 Box-shadow は要素のボックスをシェーディングし、その周囲に四角形を配置します。

CSS フィルターエフェクトモジュール (EN) で定義されているドロップシャドウフィルター (EN) 関数は、テキストを含め、適用されるものの実際のアルファ形状に従います。

プロパティ	に適用されます	レイヤリング	費用
テキストシャドウ	グリフのアウトライン	カンマ区切り、ネイティブ	低い
ボックスシャドウ	エレメントボックス	カンマ区切り、ネイティブ	低から中程度
drop-shadow()	アルファシェイプ (画像、SVG、テキスト)	フィルター呼び出しごとに 1 つのシャドウ	より高い、GPU 依存

Box-shadow はテキストを完全に無視し、周囲のボックスに影を付けるため、個々の文字の形に影を付けることが目的の時点では間違ったツールです。そのジョブは、代わりに専用のボックスシャドウジェネレーターに属します。

ドロップシャドウは、複数の要素または画像全体をラップし、その内部の実際の形状をトレースできますが、これは text-shadow や box-shadow では実行できません。

トレードオフはレンダリングコストです。ドロップシャドウは、ブラウザがボックスや文字の輪郭だけでなく実際の形状を計算する必要があるため、テキストシャドウよりも動作が重くなる傾向があります。

Text-Shadow をサポートするブラウザはどれですか? 互換性の制限はどこにありますか?

現時点では、最新のブラウザー全体でのテキストシャドウのサポートは実質的に普遍的です。

主要な数値（使用可能 (EN)）:

現在のすべてのバージョンで Chrome、Firefox、Edge、Safari を完全にサポート
Internet Explorer のサポートはバージョン 10 と 11 に限定され、IE 5.5 ～ 9 はサポートされません。
Opera Mini はブラー半径の値を完全に無視するため、シャドウはまったくブラーなしでレンダリングされます。

残っているギャップは、ほぼ完全にレガシーソフトウェアに存在します。現在のブラウザーリストに基づいて構築している人は、レンダリングの壁にぶつかることはほとんどありません。

プロジェクトの実際のトラフィックをブラウザ間の互換性 (EN)データと照合して確認することには、重いシャドウレイヤリングを出荷する前に 5 分かかる価値があります。これは、内部ツールではなく公開マーケティングページの場合は 2 倍になります。

Chrome DevTools を使用すると、これを事前に簡単に確認できます。スタイルインスペクターを開き、実際にレンダリングされたページに対してシャドウ値をライブで微調整します。

CSS を手動で記述する代わりにテキストシャドウジェネレーターを使用することの長所と短所は何ですか?

発電機はスピードで勝負します。同じ 4 つの部分からなる構文をメモリから入力し、適切になるまでぼかしとオフセットを観察するのは、3 つのスライダーをドラッグするよりも時間がかかります。

発電機の長所:

保存、更新、チェックのループに代わる即時の視覚的なフィードバック
オフセット x、オフセット y、ブラー半径の順序を覚える必要はありません。
グロー、ネオン、3D などのレイヤー効果を試行錯誤なしで組み合わせることができます。

ジェネレーターの短所:

各数値が何をするのかを実際に理解せずに値をコピーアンドペーストする
生成されたコードには、手書きの値には必要のない追加のレイヤーを含めることができます
text-shadow が実際に取得すべき間違ったプロパティであることを教えてくれません

手動コーディングは、見出し上の 1 つの単純な影という特定のケースで有効です。 text-shadow: 1px 1px 2px #000; と入力すると、ブラウザのタブを開くよりも時間がかかりません。

ジェネレーターの本当の成果は、デザインで 3 つまたは 4 つのスタックされたシャドウが必要になると現れます。この場合、試行錯誤によってすべてのオフセットを手動で調整するのはすぐに面倒になってしまいます。

この速度の利点は、コーディングよりも実際にはユーザビリティ (EN)の方が得られるものです。このツールは、技術的には決して難しいことではなく、単に面倒なだけだったタスクから摩擦を取り除きます。

CSS テキストシャドウジェネレーターを段階的に使用するにはどうすればよいですか?

どのジェネレーターを開くかに関係なく、すべてのジェネレーターはほぼ同じワークフローに従います。

サンプルテキストをプレビューボックスに入力するか貼り付けます。
スライダを使用して水平および垂直オフセットを設定します
エッジの柔らかさが適切になるまでぼかし半径を調整します
実際のページの背景と照らし合わせて影の色を選択します
効果に深さや輝きが必要な場合は、2 番目または 3 番目のシャドウレイヤを追加します。
生成された CSS コードスニペットをコピーし、スタイルシートに貼り付けます。

1 つのステップが他のステップよりもスキップされます。 ジェネレーターのデフォルトの白いキャンバスではなく、実際の背景色に対してプレビューをチェックします。

白ではくっきりと見える影も、ダークヒーローの画像や色付きのセクションの背景では完全に消えてしまうことがあります。

同じ効果がページ全体で繰り返される場合は、インラインスタイルではなく、出力を外部スタイルシート、またはプロジェクトで既に使用している場合は Sass パーシャルに貼り付けます。

テンプレート全体に散在する 5 つのインラインコピーを探すよりも、後で 1 つのルールを調整する方が簡単です。

特定のテキストシャドウ効果 (グロー、ネオン、3D、エンボス) を作成するにはどうすればよいですか?

同じ 4 つの部分からなる構文でも、オフセット、ブラー、カラーがどのように組み合わされるかによって、非常に異なる結果が生成されます。

ネオン効果

ネオンテキストはオフセット 0 で 3 つまたは 4 つの影を重ね、そのたびにぼかし半径を上げます。

color: #fff;
text-shadow:
  0 0 5px #0ff,
  0 0 15px #0ff,
  0 0 30px #0ff;

ここでは通常、テキストの色は白に近い色に設定されるため、グローは色付きの輪郭ではなく、外側にこぼれる光として読み取られます。

3D効果

レイヤードオフセットにより 3D の外観が作成されます。1 つのシャドウが数回繰り返され、繰り返すたびにピクセルずつ微調整され、色はフラットに保たれます。

text-shadow:
  1px 1px 0 #ccc,
  2px 2px 0 #bbb,
  3px 3px 0 #aaa;

ここではフォントの太さが重要です。

薄い書体は、これだけ積み重ねられた層の下でバラバラになってしまいます。太字または黒色のウェイトが形状を保持します。

エンボス効果

エンボスでは、スタックの代わりに 2 つのシャドウを使用します。1 つは左上にオフセットされた明るいシャドウ、もう 1 つは右下にオフセットされた暗いシャドウです。

レイヤー	オフセット	色
ハイライト	-1px -1px 0	ライトグレーまたはホワイト
影	1px 1px 0	ダークグレーまたはブラック

color: #888;
text-shadow:
  -1px -1px 0 #fff,
  1px 1px 0 #333;

この組み合わせは、ニューモーフィズム (EN) デザインの背後にある同じ明暗ロジックであり、UI パネルではなくテキストに適用されるだけです。

中間調の背景に対してのみ正しく読み取られます。純白または純黒では、2 つのレイヤーのうちの 1 つが完全に消えます。

Text-Shadow はホバーまたはトランジションでアニメーション化できますか?

テキストシャドウはホバー時に遷移でき、ブラウザは 2 つの状態の間で色とぼかし半径をスムーズにアニメーション化します。

問題はパフォーマンスです。 Text-shadow は、変更されるフレームごとに再描画をトリガーします。これは、ブラウザーがレイヤーの位置を変更するだけでなく、ぼやけたピクセルを再計算する必要があるためです。

広く引用されている Tobias Ahlin のシャドウのアニメーション化の内訳 (EN)では、同じ再ペイントコストが box-shadow に適用され、text-shadow が同じレンダリングパスを共有していることがわかりました。

このコストを回避できるプロパティ:

不透明度
変換する

どちらもハードウェアアクセラレータで、完全な再描画ではなく合成のみをトリガーします。

一般的な回避策は、シャドウを固定したままにし、代わりにシャドウを運ぶ要素の不透明度を移行することで、フレームごとに再描画せずにフェードインします。

単一の見出しまたはボタンでは、このコストは目に見えません。長いリストやカードのグリッド全体に影をアニメーション化するページでは、スムーズなインタラクションと、低電力デバイスで目に見えるジャンクの違いが生じます。

単純なホバー状態を超えた、より広範な文字レベルのモーションは、実際には独自のカテゴリです。これは、静的なシャドウ効果よりも CSS テキストアニメーション (EN)に近いものです。

Text-Shadow が機能しない、または失敗するのはどのような場合ですか?

Text-shadow は、十分に文書化されたいくつかの特定の状況では、エラーをスローするのではなく、静かに失敗します。

強制カラーモード: Windows ハイコントラストおよび同様のシステムレベルの設定では、テキストシャドウが完全に強制的に適用されません。 MDN によれば、これを検出する forced-colors メディアクエリ (EN)は、2022 年 9 月から新たにベースラインで利用可能になり、2025 年 3 月から広く利用可能になりました。

ユーザーが選択したパレットはそれをオーバーライドし、さらに多くの CSS でそのオーバーライドと戦うことは、そもそもアクセシビリティ設定の意味を無効にします。

印刷スタイルシート: HTML5 ボイラープレート (EN) によって普及したパターンを含むほとんどのプロダクション印刷スタイルは、ページが紙に印刷される前にブランケットオーバーライドルールで text-shadow と box-shadow を削除します。

インクはスクリーンのようにぼかしをレンダリングしないため、影は文字の後ろに汚れとして印刷されるだけです。

コントラストの低い可読性: 影の色が背景に近すぎると、効果が飲み込まれ、場合によってはテキストも一緒に飲み込まれます。

WebAIM Million (EN) によると、2026 年には低コントラストテキストとしてフラグが立てられたホームページの 83.9% が、2025 年の 79.1% から増加しました。影の色の選択が適切でなかったことが、数値が下がるのではなく上昇するもう 1 つの原因です。

WCAG 2.1 (EN) では、通常のテキストのカラーコントラスト (EN)比を最小 4.5:1 に設定します。効果的なコントラストを侵食する影は、準拠しているテキストをその線の下に押し込む可能性があります。

これはいずれも、テキストシャドウを避けるという意味ではありません。これは、ウェブアクセシビリティ (EN)の基本的な慣行に沿って、読みやすいテキストの上に重ねられた装飾として扱うことを意味し、代替ではありません。

生成されたテキストシャドウ出力を破壊する一般的な間違いは何ですか?

テキストシャドウジェネレーターからの出力のほとんどは、異常な理由ではなく、3 つの予測可能な理由のいずれかで失敗します。

間違い	何が起こるか	修正方法
ぼかし半径が大きすぎます	文字の形が霧に溶ける	ぼかしをフォントサイズの 20 ～ 30% に落とします
オフセット値がありません	影はテキストの後ろに見えないように存在します	いずれかの軸に少なくとも 1 ピクセルを追加します
階層化された値の部分コピー	1 つのシャドウレイヤのみがレンダリングされます	カンマ区切りの完全な文字列をコピーします

最も一般的なのはぼかしの設定が高すぎることです。半径がフォントサイズの約 3 分の 1 を超えると、影として読み取られなくなり、文字の後ろの霧として読み始めます。

通常、フォントサイズの 20 ～ 30% に切り戻すと、柔らかさを失うことなく形状が復元されます。

Offset-x と offset-y を両方とも 0 に設定し、ぼかしを付けないと、文字がテキストを完全に隠すテキストのすぐ後ろに影が生成されます。

施設は何もしなかったようです。実際には、影は書かれたとおりにレンダリングされ、何も表示されていない場所に積み重なっているだけです。

3 番目の間違いは、コードではなくクリップボードで発生します。マルチレイヤー値はカンマで区切られた長い文字列であり、その一部のみをコピーすると、カット後の各レイヤーが削除されます。

出荷する前に、完全な文字列をジェネレーター自体のプレビューに貼り付けて戻します。これが最も重要になるのは、値がツールからの直接コピーではなく、チャットメッセージや設計引き継ぎドキュメントを通じて到着した場合です。

よくある質問：CSS text-shadowジェネレーター

ブラウザがレンダリングするシャドウレイヤーの最大数はいくつですか?

ブラウザーは、text-shadow 値内のカンマ区切りのシャドウの数にハードキャップを設けません。

実際の上限は現実的です。ペイントのコストはレイヤーごとに上昇しますが、ほとんどのジェネレーターでは上限が 8 ～ 10 程度です。

Text-Shadow はすべてのブラウザでアルファ透明度をサポートしていますか?

はい。アルファ透明度は同じ色の構文の一部であるため、text-shadow をサポートするすべてのブラウザは、その中のrgba および hsla 値もサポートします。

1 つの例外は Internet Explorer 9 以前であり、このプロパティはまったくサポートされていませんでした。

Text-Shadow は背景画像に適用できますか、それともテキストのみに適用できますか?

Text-shadow は、実際のテキストノードのグリフのみをシェーディングします。

背景画像、SVG 形状、要素のボックスには影響しません。

背景画像をシェーディングするには、代わりにドロップシャドウフィルタが必要になります。このフィルタは、境界ボックスではなく画像の実際のアルファ形状に従います。

Text-Shadow はページのパフォーマンスや SEO に影響しますか?

静的テキストシャドウはレンダリングにほとんどコストがかからず、検索エンジンは装飾 CSS をコンテンツとして解析しないため、直接的な SEO への影響はありません。

読みやすさはさらに重要です。コントラストを低下させる影はエンゲージメントを損なう可能性がありますが、これはユーザビリティの問題であり、ランキング要素ではありません。

生成された値は、Sass Mixin、Tailwind、または Bootstrap ユーティリティクラスとして再利用できますか?

はい。生成された text-shadow 値は、変数として Sass mixin にドロップされるか、設定ファイル内のカスタム Tailwind (EN) ユーティリティクラスにドロップされます。

ブートストラップ (EN) には text-shadow ユーティリティが付属していないため、そのプロジェクトには小さなカスタムクラスが必要です。

CSS テキストシャドウジェネレーターエフェクトを出荷する前に何を確認する必要がありますか?

CSS テキストシャドウジェネレーターエフェクトは、そのレンダリング、コントラスト、モーションの動作がそれぞれページの実際の背景に対して検証されると、出荷する準備が整います。

準備が整っているかどうかは、次の 3 つのチェックで順番に判断されます。

実際の背景とのコントラスト
強制カラーと印刷フォールバック
トラフィックが使用するブラウザ間でのレンダリング

コントラストに失敗したシャドウは通常、他の 2 つのチェックにも失敗するため、順序をスキップすることは、ステップをスキップすることよりも重要ではありません。

ただし、影の値を使って光を点滅させたり、脈動させたりする場合は例外です。動きを抑える代替表示を用意しなければ、アクセシビリティに関する重要な設定を尊重できません。

MDN によると、prefers-reduced-motion (EN) は 2020 年 1 月からすべての主要ブラウザでサポートされ、2022 年 7 月からベースラインが広く利用可能になりました。テキストシャドウをチェックせずにアニメーション化すると、派手なデモと引き換えに、一部の訪問者にとって壊れたエクスペリエンスが得られます。

半透明のパネル上にあるテキストには、同じコントラストの規律が必要です。これが、CSS グラスモーフィズムジェネレーターの出発点です。

CSS テキスト シャドウ ジェネレーターとは何ですか?