CSS box-shadow ジェネレーター

使い方

1. プリセットから近い影を選ぶか、レイヤー1の値を調整します。
2. 横方向（X）・縦方向（Y）・ぼかし・広がり・不透明度は、スライダーか数値入力で変更します。数値はスライダーの範囲より大きな値も入力できます。
3. 色はカラーピッカーか「#000000」形式のカラーコードで指定します。内側に影を付けるときは「内側の影（inset）」をオンにします。
4. 影を重ねるときは「レイヤーを追加」を押します（最大5層）。上のレイヤーほど手前に描かれます。
5. プレビューの背景を明るい・暗いに切り替えて確認し、CSSまたはTailwind CSSのクラスをコピーします。

注意事項

• 値の範囲は、X・Y・広がりが-500〜500px、ぼかしが0〜500px、不透明度が0〜100%です。範囲外の値は端の値に丸めます。小数は2桁までです。
• 単位はpxのみです。色は rgba() で出力します（不透明度100%でも rgba(…, 1) と書きます）。
• Tailwind CSSは任意値（shadow-[…]）の書き方で出力します。v3.0以降とv4で使えますが、v2以前では使えません。tailwind.config などのテーマ値への変換はしません。
• text-shadow や filter: drop-shadow() は対象外です。
• 入力した値は保存しません。ページを閉じると消えます。

計算・変換の仕組み

各レイヤーを「inset X Y ぼかし 広がり 色」の順に書き、カンマで区切ってつなげます。0もpx付きで「0px」と書きます。

Tailwind CSSの出力では、各レイヤー内の空白をアンダースコア（_）に置き換え、rgba() 内とレイヤー間のカンマは空白なしでつなげます。