CSS Box Shadow ジェネレーター

使い方

1. プリセットを選ぶか、ゼロから始める。
2. 各レイヤーの offset・blur・spread・色を調整。
3. 内側影が必要なら Inset をオン。
4. CSS ルールまたは Tailwind クラスをコピー。

よくある質問

Blur と Spread の違いは？

Blur は影の境界を柔らかく — 透明にフェードする距離。Spread はぼかし前の影の形そのものを拡大・縮小（負の値で内側へ）。

複数レイヤーを重ねるべき？

自然な影は通常 2 つ以上必要 — 近くて濃いレイヤー + 遠くて薄いレイヤー。Material Design や Tailwind のデフォルト影も全てマルチレイヤー。

なぜ HEX ではなく rgba()？

透明度のある色は背景になじみ、より自然です。rgba() でアルファを直接指定できます。

Tailwind クラスのアンダースコアは？

Tailwind は空白をクラス区切りとして扱うため、任意値では空白の代わりにアンダースコアを使います。

関連ツール