CSS テキスト シャドウ ジェネレーター（マルチレイヤー）

使い方

1. プレビューテキスト入力、フォントサイズ・ウェイト・テキスト色・背景を選択。
2. プリセットから開始 → レイヤーチップをクリック、x/y/blur スライダーまたは色文字列を編集。
3. 「追加」で層を増やし、CSS をコピーしてスタイルシートに貼付。

よくある質問

アウトラインプリセットの仕組み？

4 つの対角コーナー（±1px, ±1px）にブラー 0 の影を 4 つ重ねます。CSS でアウトラインを擬似的に作る最も安価な方法 — 本来は `text-stroke` ですが WebKit 以外でサポートはまだら。

なぜネオンが 4 レイヤー？

説得力あるネオングローには最低 3 層 — 鋭い内側白コア、アクセント色の中ブラー、より広い柔らかいヘイロー。4 番目はヘイローを更に拡張。少ないと平坦、5 を超えると描画コストばかり。

rgba 色対応？

はい — どんな CSS 色値も色フィールドで動作：hex (#fff)、rgb()、rgba()、hsl()、hsla()、oklch()、名前付き。柔らかい影は通常 alpha < 1 でないと「グロー」ではなく「ペンキの染み」に見えます。

深いスタックは性能影響？

各レイヤーは個別の合成オペレーション — 大きな見出しの 20+ ブラー影は描画ごとに数 ms。本文は問題ないが、巨大なヒーローテキストは DevTools の描画警告を要注意。

関連ツール