CSS box-shadow 生成
box-shadowをビジュアルで生成。影のプレビュー付き。
▶このツールについて
box-shadowは、要素に影を付けて立体感や浮き上がり効果を演出するCSSプロパティです。カードのエレベーション、ボタンの押下感、モーダルの影など、モダンなUIには欠かせない要素です。オフセット(x, y)、ぼかし、広がり、色の4つ以上の値を指定する必要があり、数値の調整には慣れが必要です。このツールでは、スライダーで直感的に調整しながら影をプレビューし、生成されたCSSをコピーできます。複数シャドウの追加にも対応しています。
各パラメータの意味
X/Y offset=影のずれ方向、Blur=ぼかし、Spread=広がり、色・不透明度=影の見た目。スライダーを動かすとプレビューが即時反映されます。
15%
影がここに表示
使い方
オフセット、ぼかし、広がり、色を調整してbox-shadowをプレビュー。複数シャドウの追加も可能。生成されたCSSをコピーできます。
いつ使うか
カードの浮き上がり効果、ボタンの押下感、モーダルの影、立体感の演出に。
使用例
0 4px 6px -1px rgba(0,0,0,0.1)、0 10px 15px -3px rgba(0,0,0,0.1)