text-shadowとは？
text-shadowは文字と文字装飾へ影を付けるCSSプロパティです。W3CのCSS Text Decoration Module Level 3では、影1個を「X方向、Y方向、任意のぼかし、任意の色」で指定し、複数の影はカンマで区切ります。
text-shadow: X Y blur color;X・Y・blur・colorの意味
Xの正値は右、負値は左へ、Yの正値は下、負値は上へ影を動かします。blurは0以上のぼかし半径で、0なら輪郭がはっきりします。色をCSS上で省略するとcurrentColorが使われますが、このツールは結果を明確にするため色を必ず出力します。
複数シャドウの重なり順
影はカンマ区切りで重ねられ、先に指定した影ほど手前へ描画されます。このツールでは一番上の「影1」をCSSの先頭へ出力します。
text-shadow:
0 0 4px #FF3FD1,
0 0 12px rgba(255, 63, 209, 0.82);発光風・ネオン風を作るコツ
XとYを0にして、同系色の影をぼかし違いで重ねると発光風になります。ネオン風では明るい影を手前に置き、大きく薄い影を後ろへ追加すると奥行きが出ます。
仕様範囲について
この初期版は、広く実装されているW3C CSS Text Decoration Module Level 3のtext-shadow仕様に沿った4要素を対象にします。Level 3ではbox-shadowにあるspreadやinsetを扱わないため、UIと生成値にも含めません。CSSWGのLevel 4 Editor’s Draftには拡張案がありますが、本ツールではブラウザ互換性を優先して採用していません。
読みやすさも確認しましょう
影を強くしすぎると文字の輪郭が曖昧になり、読みづらくなることがあります。実際に使う背景色と文字色に近い状態で、スマートフォンを含めて確認してください。
よくある質問
text-shadowとは何ですか？
CSSで文字と文字装飾へ影を描画するプロパティです。
3つの数値は何を表しますか？
X方向、Y方向、ぼかし半径の順です。
Xにマイナス値を使えますか？
使えます。負の値にすると影が左方向へ移動します。
Yにマイナス値を使えますか？
使えます。負の値にすると影が上方向へ移動します。
ぼかしを省略できますか？
CSSでは省略でき、その場合は0として扱われます。このツールは分かりやすく3値を常に出力します。
ぼかしに負の値を使えますか？
使えません。0以上を指定してください。
影の色を省略するとどうなりますか？
CSS仕様では要素のcurrentColorが使われます。このツールでは結果を明確にするため色を出力します。
透明な影にできますか？
できます。透明度を0～100%で設定し、必要に応じてalpha付きのrgba()へ変換します。
文字色と同じ影にできますか？
同じHEX色を指定できます。CSSではcurrentColorを指定する方法もあります。
複数の文字影を重ねられますか？
はい。カンマ区切りで最大8個まで生成できます。
複数の影はどの順で重なりますか？
先に指定した影ほど手前に描画されます。
文字を発光させるにはどうしますか？
XとYを0にし、同系色でぼかしの異なる影を複数重ねます。
ネオン文字を作れますか？
はい。ネオン風プリセットから色やぼかしを調整できます。
box-shadowとの違いは何ですか？
text-shadowは文字へ影を付け、box-shadowは要素のボックスへ影を付けます。
text-shadowはレイアウトサイズを広げますか？
いいえ。影はレイアウト計算へ影響せず、影だけでスクロールを発生させません。
spreadやinsetは使えますか？
このツールの初版は一般的なtext-shadowのX位置・Y位置・ぼかし・色・複数影に対応し、spreadやinsetは生成しません。
入力内容は送信されますか？
いいえ。設定とサンプル文字はブラウザ内だけで処理します。