CSS ボックスシャドウ ジェネレーター
X/Yオフセット・ぼかし・広がり・不透明度をスライダーで調整し色を選択するとリアルタイムプレビューとCSS出力が即時生成されます。
X/Yオフセット、ぼかし、広がり、不透明度、色、insetを調整して1つのCSS box-shadow宣言を生成します。
CSSボックスシャドウを作る方法
- XとYのスライダーで影の位置を調整します。
- ぼかし、広がり、不透明度、色、insetを設定します。
- プレビューを確認してbox-shadow宣言をコピーします。
生成ルール
選択したHEX色をrgba()へ変換し、不透明度は小数2桁で出力します。
生成するのは1レイヤーのbox-shadowのみで、複数影やtext-shadowには対応しません。
プライバシーと制限
操作とプレビューはブラウザ内で完結します。UIのスライダー範囲内で1つのbox-shadow宣言を生成するツールです。
CSS box-shadow FAQ
insetに対応しますか？
はい。Insetを有効にするとinsetキーワードが付きます。
複数の影を作れますか？
いいえ。1レイヤーのみです。
色は何形式ですか？
HEX入力をrgba()へ変換します。
spreadは負にできますか？
はい。スライダー範囲内で負の値を選べます。
データを送信しますか？
いいえ。ブラウザ内で処理します。