CSS box-shadow ジェネレーター（ボックスシャドウ生成）
オフセット・ぼかし・拡散・色・不透明度をスライダーで調整しながらCSSのbox-shadowをプレビュー付きで生成できる無料ツール。生成したコードはワンクリックでコピーできます。
box-shadow とは
`box-shadow` は要素に影を落とす CSS のプロパティです。値は「水平方向のオフセット・垂直方向のオフセット・ぼかし半径・拡散半径・色」の順に並べて書きますが、**数値が4つも並ぶうえ、ぼかしと拡散の違いは文字だけでは掴みにくい**ため、手で書いて確かめるのが面倒なプロパティでもあります。このツールはスライダーで各値を動かしながら、結果をその場でプレビューできます。
影の印象を左右するのは数値の大きさよりも組み合わせです。**自然に見える影は、オフセットを小さく・ぼかしを大きく・不透明度を低く**したものが多く、逆にオフセットを大きく取って不透明度を上げると、切り抜いて貼ったような硬い印象になります。`inset` を指定すると影が要素の内側に落ち、へこんだような表現になります。生成したコードはワンクリックでコピーでき、処理はすべてブラウザー内で完結します。
影を作る手順
- オフセットを決める 光源の方向を決める操作です。多くの場合は X を 0、Y を少しだけ正の値にすると自然になります。
- ぼかし半径を調整する 影の輪郭のやわらかさです。値を大きくすると広く淡く広がります。
- 拡散半径を調整する 影そのものを太らせる（または痩せさせる）値です。**ぼかしと違い、輪郭の硬さは変わりません。**
- 色と不透明度を選ぶ 黒の半透明が無難ですが、背景色に近い濃い色を薄く載せるとより馴染みます。
- コードをコピーする 生成された `box-shadow` の値をそのままスタイルシートへ貼り付けられます。
使いこなすためのヒント
- スライダーだけでなく数値を直接入力しても調整できます。細かい値を指定したいときに便利です。
- 「inset」をオンにすると影が要素の内側に描画され、へこんだような立体感を表現できます。
- spread（拡散半径）を大きくすると影の輪郭全体が広がり、blur（ぼかし半径）を大きくすると輪郭がぼやけて柔らかい印象になります。
- 不透明度を下げるほど影が薄く自然になり、複数の要素を重ねたレイアウトでも背景が透けて見えやすくなります。
- 生成したCSSはそのままスタイルシートに貼り付けて使えます。ボタンやカードのホバー効果に組み合わせるのもおすすめです。
こんなときに使えます
カードやボタンに立体感を出す
わずかな影があるだけで、クリックできる要素だと伝わりやすくなります。
モーダルやドロップダウンを浮かせる
背面のコンテンツとの重なりを、影の強さで表現できます。
デザインカンプの影を再現する
デザインツールの影の設定を CSS に翻訳するとき、見比べながら値を合わせられます。
へこんだ表現を作る
`inset` を使えば、入力欄が沈んで見えるような処理も試せます。
box-shadow の用語
- オフセット
- 影をずらす距離です。1つ目が水平方向（X）、2つ目が垂直方向（Y）で、正の値で右・下へずれます。
- ぼかし半径（blur）
- 影の輪郭をぼかす量です。**0 にすると輪郭のくっきりした影になります。**
- 拡散半径（spread）
- 影の大きさを広げる量です。負の値にすると影が縮みます。
- inset
- 影を要素の内側に落とすキーワードです。くぼんだような表現になります。
- 不透明度
- 影の濃さです。`rgba()` のアルファ値として指定します。**濃すぎる影は重く見えます。**
- 複数の影
- カンマ区切りで複数の影を重ねられます。近くの濃い影と遠くの淡い影を重ねると自然になります。
よくある質問
余談ですが ― box-shadowが変えたWebデザインの表現力
box-shadowがCSS3で標準化される以前、Web上で影を表現するには画像編集ソフトであらかじめ影を描き込んだPNG画像を背景に敷く、あるいは複数のdiv要素を重ねてグラデーション背景で疑似的に影を作るといった、手間のかかる手法が主流でした。影の形やぼかし具合を少し変えるだけで画像を作り直す必要があり、デザインの試行錯誤には大きなコストがかかっていました。
2009年頃からCSS3の一部としてbox-shadowがブラウザに実装され始めると、影の生成が1行のCSSプロパティだけで完結するようになりました。画像を用意する必要がなくなったことでページの読み込みも軽量化され、レスポンシブデザインで画面サイズが変わっても影の見た目が崩れないという利点も生まれました。
2014年にGoogleが発表したMaterial Designでは、box-shadowを応用した「elevation（高度）」という概念が導入されました。要素ごとに異なる高さ（Z軸上の位置）を割り当て、高い要素ほど影を大きく濃くすることで、平面的な画面の中に奥行きのある階層構造を表現する手法です。これは現在でも多くのデザインシステムに影響を与えています。