🌑 text-shadowジェネレーター
CSSの text-shadow をGUIで作成します。プレビュー文字に影をリアルタイム反映しながら、水平・垂直・ぼかし・色・不透明度を調整。影レイヤーの多重化・並べ替え・プリセットに対応し、生成されたコードをそのままコピーできます。
プレビュー
影レイヤー
上にある層ほど手前（上）に描かれます。上下ボタンで重なり順を入れ替えられます。
生成されたCSS
—
プリセット
選ぶと影の設定がまとめて置き換わります。そこから微調整できます。
解説
text-shadow は、文字（テキスト）の周囲に影や光をつけるCSSプロパティです。値は「水平方向のずれ 垂直方向のずれ ぼかし半径 色」の順に4つの要素を並べて指定します。例えば `text-shadow: 2px 2px 4px rgba(0,0,0,0.5);` なら、文字の右下2pxの位置に、4pxだけぼかした半透明の黒い影を落とします。水平・垂直の値はマイナスも指定でき、負の値にすると影は左や上へ向かいます。ぼかし半径を0にすると輪郭のくっきりした影になり、大きくするほど柔らかくにじみます。本ツールは、これらの数値をスライダーと数値入力で触りながら、プレビュー文字への効き方をその場で確認できます。
影の色は、色ピッカーで選んだ色（HEX）と不透明度(%)を組み合わせて rgba() 形式で出力します。rgba() は赤・緑・青の3チャンネルに加え、4つ目に「アルファ値（不透明度）」を0〜1で指定する書き方です。不透明度100%はアルファ1.0（完全に不透明）、50%は0.5（半透明）に対応します。影は半透明にすると背景となじみ、下の文字や別の影と自然に重なります。逆に不透明度を上げると影の主張が強くなり、コントラストのはっきりした装飾になります。本ツールでは%で直感的に指定し、内部でアルファ値へ換算しています。
text-shadow はカンマ区切りで複数の影を並べることができ、これを「多重影（レイヤー）」と呼びます。記述した順に手前から奥へ重なり、リストの先頭が最も手前（上）に描かれます。この性質を使うと、細い縁取りの上にぼかした光を敷いて立体感を出したり、色の違う影を少しずつずらして重ねてネオンの発光を表現したりできます。本ツールは影レイヤーを自由に追加・削除でき、上下ボタンで重なり順を入れ替えられるため、狙った質感になるまで層を調整できます。生成される値は各レイヤーの `Xpx Ypx blurpx rgba(...)` をカンマでつないだ1行のCSSです。
用途としては、写真や色の上に置く見出しの可読性向上（薄い影で文字を浮かせる）、ロゴやバナーの装飾、ゲーム風・レトロ風の立体文字、ネオンサインのような発光表現などが代表的です。text-shadow は主要な最新ブラウザ（Chrome・Edge・Firefox・Safari）で広く対応しており、特別なベンダープレフィックスは不要です。ただし影を濃く・多く重ねすぎると文字の可読性がかえって下がるため、本文よりも見出しやロゴなど限られた箇所での使用がおすすめです。すべての処理はブラウザ内で完結し、入力した文言や設定はどこにも送信されません。
よくある質問
text-shadowの4つの値はそれぞれ何を表しますか？
左から順に「水平方向のずれ」「垂直方向のずれ」「ぼかし半径」「影の色」です。例えば `2px 4px 6px rgba(0,0,0,0.4)` は、右へ2px・下へ4pxずらした位置に、6pxぼかした半透明の黒い影を落とすという意味です。水平・垂直はマイナス値で左・上方向になります。
影を左上に出すにはどうすればよいですか？
水平X・垂直Yをマイナスにします。水平Xを負にすると影は左へ、垂直Yを負にすると上へ移動します。本ツールのスライダーは-50〜50pxの範囲でマイナス側にも動かせるので、左上なら両方を負の値にしてください。
ぼかし(blur)を0にするとどうなりますか？
影の輪郭がくっきりした、にじみのないコピーのような影になります。値を大きくするほど影は柔らかく広がり、ふんわりした印象になります。輪郭を活かした縁取りや立体文字にはぼかし0付近、影で浮かせる表現には大きめのぼかしが向きます。
不透明度(%)は何に効きますか？
影の色の濃さ（透け具合）です。内部でrgba()のアルファ値に換算され、100%が不透明・0%が完全に透明です。半透明にすると背景となじみ、複数の影を重ねたときも自然につながります。強い影にしたいときは不透明度を上げてください。
影を複数重ねるにはどうすればよいですか？
「影レイヤーを追加」を押すと影が増え、text-shadowのカンマ区切りで複数の影として出力されます。リストの上にある層ほど手前（上）に描かれます。上下ボタンで重なり順を入れ替えられるので、縁取り＋発光や多重の立体影などを作れます。
生成されたCSSはどう使えばよいですか？
表示された `text-shadow: …;` をコピーし、影をつけたい要素（h1やロゴのクラスなど）のCSSに貼り付けてください。text-shadowはテキストにのみ効くプロパティなので、文字を持つ要素に指定します。要素の箱に影をつけたい場合はbox-shadowを使います。
text-shadowはどのブラウザで使えますか？
Chrome・Edge・Firefox・Safariなど主要な最新ブラウザで広く対応しており、ベンダープレフィックスは基本的に不要です。非常に古い環境では表示されないことがありますが、その場合も影が出ないだけで文字自体は読めるため、装飾目的なら安心して使えます。
入力した文字や設定はどこかに送信されますか？
送信されません。プレビュー文字の変更、色や数値の調整、CSSの生成まで、すべてお使いのブラウザ内で処理しています。設定は保存もサーバー送信もされないため、公開前のロゴ文言などを入れても安全です。