CSS box-shadow ジェネレーター
🔒ブラウザ内処理
スライダーで影を調整し、CSS をワンクリックコピー。複数レイヤー・inset 対応。ブラウザ内で完結します。
プリセット
シャドウレイヤー
X0px
Y4px
Blur6px
Spread0px
透明度7%
色
X0px
Y2px
Blur4px
Spread0px
透明度5%
色
プレビュー
CSS
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.07), 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
よくある質問
データはサーバーに送信されますか？
されません。box-shadow の計算はすべてブラウザ内で完結します。
レイヤーは何枚まで追加できますか？
最大10レイヤーまで追加できます。最低1レイヤーが必要です。
inset とは何ですか？
inset を有効にすると、影が要素の外側ではなく内側に表示されます。くぼんだ表現やインナーグロウに使います。
Neumorphism（ニューモーフィズム）とは？
要素が背景と同じ素材から押し出されたように見えるデザインスタイルです。明るい方向と暗い方向の2つのシャドウを組み合わせて表現します。