Box Shadow ジェネレーター
offset・blur・spread・色をスライダーで調整するとシャドウが即時にプレビュー反映されます。複数レイヤーを重ねて深みのあるシャドウも作成可能。
シャドウレイヤー
CSS
使い方
1
レイヤーを調整
レイヤーごとにX/Yオフセット、blur、spread、色、insetの有無を設定してください。スライダーを動かすとプレビューが即時更新されます。
2
レイヤーの追加/削除
+ボタンで最大5レイヤーまで重ねられます。マテリアル・ニューモーフィズムのような効果は通常2〜3レイヤーで十分です。
3
コードをコピー
結果のbox-shadow CSSはワンクリックでコピー可能です。background:、border-radius:も併せてプレビューで確認できます。
よくある質問
何レイヤーまで重ねられますか？
最大5個まで。マテリアルやニューモーフィズム効果は通常2〜3個で十分です。
insetシャドウとは？
要素の外側ではなく内側に描画されるシャドウです。ボタン押下やくぼみ表現に使われます。
負のspreadを使うと？
spreadが負の値だとシャドウが要素より小さくなり、片側だけ少し見える繊細なシャドウになります。
box-shadowとdrop-shadowの違いは？
box-shadowは要素の矩形に沿って描画、filter: drop-shadow()は実際の形状(透明PNG・SVG)に沿って描画します。矩形ならbox-shadowが軽量です。
サーバーに送信されますか？
いいえ。すべての処理はブラウザ内で行われ、生成されたCSSが外部に送信されることはありません。
