使い方
- サンプルの文字に文字を入力します。プレビューは影を付けて表示するため、自分の言葉で結果を判断できます。
- 最初の層の水平オフセット（px）、垂直オフセット（px）、ぼかし（px）を設定します。垂直オフセットを正にすると、影は下に動きます。
- 各層の影の色と不透明度を選びます。やわらかい光を作るには、層を追加で層を増やします。
- CSSの宣言をコピーし、文字のルールに貼り付けます。
値の作り方
text-shadow プロパティは、1つの影か、コンマで区切った影の一覧を取ります。各影は、水平と垂直のオフセット、省略できるぼかし半径、そして長さの前か後ろに書ける色を持ちます。文法は CSS Text Decoration の仕様 に従います。最初の影が他の影の上に描かれ、影がなければ値は none です。
文字の影には、ボックスの影と違って広がりがありません。ぼかし半径が負になることはなく、大きいほど影は広い範囲に広がります。不透明度は rgba 色のアルファ値として、小数点以下2桁までで書かれます。長さが0の場合は単位が要らないため、ツールは0と書きます。
text-shadow: offset-x offset-y blur colour, offset-x offset-y blur colour, ...層と、エディタが確かめること
やわらかい光は、2つか3つの層を使うことが多いです。文字に近い小さく濃い影と、外側の大きく薄い影です。エディタは、最大8つの層、-200から200ピクセルのオフセット、0から100ピクセルのぼかし、0から100パーセントの不透明度を受け付けます。
プレビューの色、つまり文字の色と背景色は、プレビューのためだけのものです。CSS には含まれないため、宣言には影だけが書かれます。
例：青い光の下の黒い影
1つ目の層は、オフセットが0と2ピクセル、ぼかしが4ピクセル、黒で不透明度が30パーセントです。2つ目は、オフセットなし、ぼかしが12ピクセル、青 #3b82f6で不透明度が50パーセントです。
値は0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5) で、宣言は text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5); になります。
よくある質問
ぼかしと2つ目の層の違いは何ですか？
ぼかしは1つの影の縁をやわらかくするため、より広い範囲に薄れていきます。2つ目の層は、独自のオフセット、色、不透明度を持つ別の影を加えるため、1つ目とは別の位置に描くことができます。
オフセットに符号があるのはなぜですか？
水平オフセットが正なら影は右に、負なら左に動きます。垂直オフセットが正なら下に動くため、文字の下に落ちる影は正の値になります。
文字の影に広がりを設定できますか？
いいえ。text-shadow プロパティは、オフセット、ぼかし、色だけを取ります。ボックスの影には広がりがありますが、文字にはないため、エディタでは設定できません。
プレビューがお使いのページと違って見えるのはなぜですか？
プレビューは、ここで設定したサンプルの文字、大きさ、色を使います。お使いのページでは、影はお使いのフォント、大きさ、背景に付くため、完成前にその場で結果を確認してください。
入力したものは保存されたり、サーバーに送られたりしますか？
いいえ。サンプルの文字、プレビュー、CSS はお使いのブラウザの中で作られます。何も保存されず、当サイトのサーバーにも送られないため、ページを離れる前に宣言をコピーしてください。
出典
数値と文章の最終確認日：2026年11月10日火曜日。