CSS box-shadow 生成
要素の影（box-shadow）をプレビューを見ながらスライダーで作成。生成したCSSはコピー可能です。
▶このツールについて
CSSの「box-shadow」をスライダー操作で直感的に生成できるツールです。オフセットやぼかし具合、広がりを視覚的に調整でき、複数シャドウの重ね合わせにも対応。カードの浮き上がりやボタンの立体感作りに活躍します。
「カードデザインにいい感じの影をつけたいけれど、box-shadowの数値指定をいつも忘れてしまう…」──そんな方におすすめです。X/Y軸のズレやぼかし（blur）、広がり（spread）をスライダーで動かすだけで、リアルタイムに影のプレビューが更新されます。複数の影を重ねたリッチな表現も簡単に作成でき、お好みの影ができたらCSSをそのままコピーして使うだけです。
ツール操作
各パラメータの意味
X/Y offset＝影のずれ方向、Blur＝ぼかし、Spread＝広がり、色・不透明度＝影の見た目。スライダーを動かすとプレビューが即時反映されます。
15%
影がここに表示
使い方
- オフセット、ぼかし、広がり、色をスライダーで調整します
- プレビューで影の見た目を確認します
- 生成されたCSSをコピーしてプロジェクトに貼り付けます。複数シャドウも追加可能です
いつ使うか
カードの浮き上がり効果、ボタンの押下感、モーダルの影、立体感の演出に。
使用例
0 4px 6px -1px rgba(0,0,0,0.1)、0 10px 15px -3px rgba(0,0,0,0.1)
よくある質問
box-shadowの書き方は？
box-shadow: オフセットX オフセットY ぼかし 広がり 色; の順。例: 0 4px 6px rgba(0,0,0,0.1) で下に4px、6pxぼかしの影。insetを付けると内側の影になります。
複数シャドウの指定方法は？
カンマで区切って複数指定できます。例: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05); 先に書いた方が手前に表示されます。
box-shadowとdrop-shadowの違いは？
box-shadowは要素の四角形に影。filter: drop-shadow()は要素の形（透明部分を除く）に沿った影。アイコンや不規則な形にはdrop-shadowが適しています。
影のぼかしと広がりの違いは？
ぼかし（blur）は影の端を柔らかくする効果。広がり（spread）は影のサイズを拡大・縮小します。負の広がりで影を小さくできます。
box-shadow生成ツールの使い方は？
オフセット、ぼかし、広がり、色をスライダーで調整。プレビューを確認しながら生成されたCSSをコピーできます。
カードの浮き上がり効果は？
0 4px 6px -1px rgba(0,0,0,0.1) など。このツールでオフセットとぼかしを調整して作成できます。
insetの影とは？
内側の影。要素の内側に落ちる影で、凹んだ表現に。このツールでinsetオプションを選択できます。
モーダルの影は？
0 10px 15px -3px rgba(0,0,0,0.1) など大きめのぼかし。このツールで調整してモーダル用の影を作れます。
影の色は透明に？
rgba(0,0,0,0.1) のようにalphaで透明度を指定。黒で薄くするのが一般的です。
box-shadowのCSSをコピーするには？
このツールで調整後、生成されたCSSをワンクリックでコピー。プロジェクトにそのまま貼り付けられます。
関連ツール
色・デザインセット