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)

関連ツール