box-shadowジェネレーターの使い方｜自然でリアルな影のCSSを作る
公開日：2026年7月23日 対象ツール：box-shadowジェネレーター
box-shadow は、ほんの数値の並びで要素の「浮き方」を決めてしまう、影響力の大きいプロパティです。値の意味と、影が自然に見える理屈さえ押さえれば、勘に頼らずに狙った立体感をつくれます。この記事では各パラメータの効き方から、リアルな影の重ね方、やりがちな失敗までを整理します。
5つのパラメータの意味と効き方
box-shadow の値は、原則として左から「水平オフセット、垂直オフセット、ぼかし半径、広がり半径、色」の順で並びます。それぞれが影の見え方に別々の役割を持ちます。
- 水平オフセット（X）：影を左右にずらす量。正で右、負で左。光がどちらから当たっているかを表します。
- 垂直オフセット（Y）：影を上下にずらす量。正で下へ。実世界では光は上から来るので、Yを少し正にするのが自然です。
- ぼかし半径（blur）：影の輪郭のにじみ。0だとくっきりした硬い影、大きいほど柔らかく拡散します。要素が高く浮くほど影は大きく薄くぼける、という現実の見え方に対応します。
- 広がり半径（spread）：影そのものを膨らませたり縮めたりする量。正で全体が一回り大きく、負で小さくなります。ぼかしと組み合わせて影の面積を微調整するのに使います。
- 色と不透明度：影の色と濃さ。濃さは内部でアルファ値に変換され、薄い影ほど上品に見えます。
自然な影を付ける3つのコツ
影が不自然に見える原因の多くは、現実の光の振る舞いから外れていることです。次の3点を守るだけで、ぐっとそれらしくなります。
- 光源を1方向に固定する：ページ内の複数の要素で、Yを正・Xをほぼ0に揃えると、同じ光の下にある一貫した空間に見えます。要素ごとに影の向きがバラバラだと違和感が出ます。
- 不透明度を下げて薄く：影は真っ黒ではなく、背景に溶ける薄いグレーが自然です。濃さは10〜25パーセント程度から始めると失敗しにくいです。
- 薄い影を重ねる：1本の濃い影より、ぼかしの小さい影とぼかしの大きい影を重ねたほうが、接地感と拡散感の両方が出てリアルになります。
多重影でリアルにする
box-shadow はカンマ区切りで複数の影を一度に指定できます。現実の影は、要素のすぐ下にできる濃く狭い影と、離れるほど広がる薄い影が重なってできています。これを再現するには、オフセットとぼかしが小さめの影を1本、オフセットとぼかしが大きめで不透明度をさらに下げた影をもう1本重ねます。近い影が接地感を、遠い影がやわらかな奥行きを担い、単一の影よりも自然な立体感になります。マテリアルデザイン風の「高さ」の表現も、この重ね方が基本です。
内側の影（inset）の使いどころ
inset を付けると、影は要素の外ではなく内側に落ち、へこんだ・押し込まれた表現になります。フォームの入力欄をわずかにくぼませて「ここに入力する」と伝えたり、トグルやボタンの押下状態を表したりするのに向きます。色を白系にした inset の影は、内側からのハイライトとして立体感を足す使い方もできます。外側の影と inset をカンマで併記して、縁取りと内側の陰影を同時に与えることも可能です。
パフォーマンスと失敗例
box-shadow の描画は基本的に軽いものですが、ぼかし半径が非常に大きい影を、多数の要素やスクロール・アニメーションを伴う要素に付けると、再描画のたびに負荷がかかり、動きがもたつくことがあります。広い範囲を薄く覆いたいだけなら、過剰に大きなぼかしに頼らず、広がり半径や重ね方で調整するほうが軽く済みます。
見た目の失敗として多いのは次のパターンです。
- 濃すぎる・真っ黒：不透明度が高い純黒の影は、要素が背景から浮きすぎて汚れのように見えます。薄いグレーに落としましょう。
- ぼかしゼロで大きなオフセット：輪郭がくっきりしたまま大きくずれた影は、影というより二重写しに見えます。距離を出すならぼかしも増やします。
- 向きの不一致：要素ごとに影の方向が違うと、光源が定まらず全体が安っぽくなります。
このツールでの作り方
本ツールは、水平・垂直オフセット、ぼかし、広がり、色、不透明度、inset の各値をスライダーやピッカーで動かしながら、プレビューと box-shadow のCSSをリアルタイムに確認できます。まずYを少し正・不透明度を低めにして薄い影の当たりを付け、ぼかしと広がりで柔らかさを整えます。生成された1行をコピーし、多重影にしたいときは同じ手順でもう1本つくってカンマでつなげば、リアルな重ね影が完成します。