CSS box-shadow ジェネレーター（ボックスシャドウ生成）
オフセット・ぼかし・拡散・色・不透明度をスライダーで調整しながらCSSのbox-shadowをプレビュー付きで生成できる無料ツール。生成したコードはワンクリックでコピーできます。
使い方のヒント
- スライダーだけでなく数値を直接入力しても調整できます。細かい値を指定したいときに便利です。
- 「inset」をオンにすると影が要素の内側に描画され、へこんだような立体感を表現できます。
- spread（拡散半径）を大きくすると影の輪郭全体が広がり、blur（ぼかし半径）を大きくすると輪郭がぼやけて柔らかい印象になります。
- 不透明度を下げるほど影が薄く自然になり、複数の要素を重ねたレイアウトでも背景が透けて見えやすくなります。
- 生成したCSSはそのままスタイルシートに貼り付けて使えます。ボタンやカードのホバー効果に組み合わせるのもおすすめです。
よくある質問
blur（ぼかし半径）は影の輪郭をどれだけぼかすかを決め、値が大きいほど輪郭がなだらかに広がります。一方spread（拡散半径）は影そのものの大きさを拡大・縮小する値で、正の値では影が要素より大きく広がり、負の値では影が小さく収縮します。両者を組み合わせることで、影の質感を細かく調整できます。
insetは影を要素の外側ではなく内側に描画するオプションです。通常のbox-shadowが要素を浮き上がらせる効果を出すのに対し、insetは要素がへこんでいるような、あるいは枠の内側に影が落ちているような視覚効果を作れます。入力フォームの枠線の演出などによく使われます。
CSSのbox-shadowプロパティはカンマ区切りで複数の影を指定でき、レイヤーを重ねることでより立体的な表現が可能です。本ツールは学習・利用のしやすさを優先し単一シャドウの生成に対応しています。複数レイヤーが必要な場合は、生成したCSSをベースに手動でカンマ区切りの値を追加してください。
box-shadowはInternet Explorer 9以降を含む主要なモダンブラウザすべてでサポートされている標準的なCSSプロパティです。ベンダープレフィックス（-webkit-や-moz-）が必要だった時代もありましたが、現在はプレフィックスなしでそのまま利用できます。
完全な不透明の黒（#000000のopacity 100%）で影をつけると、背景色によっては影が浮いて見えたり不自然に強すぎたりします。不透明度を下げた半透明の黒やグレーを使うことで、どんな背景色の上でも自然に馴染む柔らかい影を表現できます。
余談ですが ― box-shadowが変えたWebデザインの表現力
box-shadowがCSS3で標準化される以前、Web上で影を表現するには画像編集ソフトであらかじめ影を描き込んだPNG画像を背景に敷く、あるいは複数のdiv要素を重ねてグラデーション背景で疑似的に影を作るといった、手間のかかる手法が主流でした。影の形やぼかし具合を少し変えるだけで画像を作り直す必要があり、デザインの試行錯誤には大きなコストがかかっていました。
2009年頃からCSS3の一部としてbox-shadowがブラウザに実装され始めると、影の生成が1行のCSSプロパティだけで完結するようになりました。画像を用意する必要がなくなったことでページの読み込みも軽量化され、レスポンシブデザインで画面サイズが変わっても影の見た目が崩れないという利点も生まれました。
2014年にGoogleが発表したMaterial Designでは、box-shadowを応用した「elevation（高度）」という概念が導入されました。要素ごとに異なる高さ（Z軸上の位置）を割り当て、高い要素ほど影を大きく濃くすることで、平面的な画面の中に奥行きのある階層構造を表現する手法です。これは現在でも多くのデザインシステムに影響を与えています。