CSS テキストシャドウジェネレーター
最大 5 つの text-shadow レイヤーを、それぞれのオフセット・ぼかし・不透明度・色とともに重ね、サンプルテキストで結果を確認できます。「CSS をコピー」で .shadowed-text ブロックをクリップボードへ。
ブラウザ内でローカルに実行 · text-shadow · rgba() · レイヤードタイプ
VoriTools
最大 5 つの text-shadow レイヤーを、それぞれのオフセット・ぼかし・不透明度・色とともに重ね、サンプルテキストで結果を確認できます。「CSS をコピー」で .shadowed-text ブロックをクリップボードへ。
ブラウザ内でローカルに実行最大 5 つの text-shadow レイヤーを 1 つのプレビューに重ねます。テキスト、フォントサイズ（24〜120 px）、太さ（400/600/800/900）、テキスト色と背景色、そしてレイヤーごとに水平・垂直オフセット（各 60 px）、ぼかし（0〜100 px）、不透明度（0〜1）、色を設定します。キー入力のたびにステージが再描画され、コード欄には「CSS をコピー」がクリップボードへ入れる文字列がそのまま出ます。
初期状態は 2 レイヤーです。2px 3px 0px rgba(54, 217, 138, 0.9) が 6px 8px 18px rgba(6, 29, 20, 0.55) の上に載り、VoriTools を 64 px・太さ 800 で表示します。出力は .shadowed-text ブロックで、1 レイヤーにつき 1 行、リストの先頭が一番上に描かれます。
出力は 1 レイヤー 1 行の影をカンマと改行でつなぎ、固定セレクター .shadowed-text とカラーピッカーの値と一緒に出力します。未編集のページでは color: #f7fff9 と text-shadow: 2px 3px 0px rgba(54, 217, 138, 0.9), 6px 8px 18px rgba(6, 29, 20, 0.55) になります。
順序は目に見えます。同じ 12 px オフセットで色だけ違う 2 レイヤーを重ねたピクセル検証では、赤を先に置くと赤い輪郭が出て、色を入れ替えると青が見えました。リストの先頭が一番上です。
オフセットは 60 px、ぼかしは 0〜100 px、不透明度は 0〜1 に制限されます。入力中もプレビューはこの範囲に収まり、フォーカスを外すと範囲内の値が欄に書き戻されます。水平オフセットの 999 は 60 px、ぼかしの -10 は 0 px として保存されます。
カラーピッカーは hex を返し、不透明度がアルファチャンネルになります。#123456 を 0.5 にすると rgba(18, 52, 86, 0.5) を出力します。ぼかし 0 はグリフの硬いコピーを描き、初期レイヤーの 2px 3px 0px がその例です。
出力に届くのは影の重なりとテキスト色だけです。プレビューテキスト、サイズ、太さ、ステージ背景はステージ内に留まります。レイヤーの色は 1 色なので、グラデーションやレイヤーごとの spread、内側の影、drop-shadow() フィルターモードはありません。
処理はすべてページ内で完結します。入力、レイヤーの追加と削除、「CSS をコピー」、「リセット」でネットワーク要求は 0 件でした（en と ja で計測）。外部要求は共通の解析タグのみです。書き出されるセレクターは常に .shadowed-text です。