CSS テキストシャドウ生成

CSSの text-shadow プロパティは、文字の後ろにぼかした、またはくっきりした複製を1つ以上描きます。1層なら写真の上の見出しを浮き立たせ、複数層なら縁取り、ネオンのグロー、3D文字、レトロなずらしも作れます。画像を使わないので、文字は選択でき、どんなサイズでも鮮明です。このジェネレーターは値を作り、追加したレイヤーを検証し、結果をお使いのブラウザー上で表示します。

使い方

1. プリセットを選ぶか、「カスタム」のままオフセット、ぼかし、色、不透明度を設定します。
2. 「プリセットのサイズ」で、縁取りを太く、グローを広く、3D文字を深くします。
3. 効果を組み合わせるときは、追加レイヤーを1行に1つずつ入力します。
4. プレビューの文字と色をページに合わせてから、CSSの1行をコピーします。

計算式

text-shadow: <x> <y> [<blur>] <color> [, more layers]

xが正なら影は右へ、yが正なら下へ動きます。ぼかしは影をやわらげ、負の値にはできません。box-shadow と違い、spread も inset もありません。縁取りプリセットは「プリセットのサイズ」だけ離れた8方向にくっきりした複製を置き、3D押し出しは奥行き1pxごとに複製を1つ重ねます。

計算例

初期値（右へ2 px、下へ2 px、ぼかし4 px、不透明度40%の黒）では、text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); というやわらかいドロップシャドウになります。ハードな影のプリセットを3 px、トマト色にすると 3px 3px 0 #ff6347 になり、1 pxの縁取りには -1px -1px 0 #000000 や 1px 1px 0 #000000 のような8つのレイヤーが必要です。