box-shadowジェネレーターの使い方｜自然でリアルな影のCSSを作る
公開日：2026年7月23日 更新日：2026年9月2日 運営：シルギア（Analyzegear, Inc.） 対象ツール：box-shadowジェネレーター
box-shadow は、数値をいくつか並べるだけで要素の「浮き方」を決めてしまう、影響力の大きいプロパティです。各値の意味と、影が自然に見える理屈を押さえれば、勘に頼らず狙った立体感をつくれます。このページでは、本ツールの実際の出力に沿って、値の読み方から自然な影のコツ、内側の影や多重影までを、具体的な数値とともに整理します。
box-shadowの5つの値と並び順
本ツールが出力する box-shadow は、左から「水平オフセット 垂直オフセット ぼかし半径 広がり半径 色」の順に並びます。既定値のままなら box-shadow: 8px 8px 16px 0px rgba(26, 34, 48, 0.25); のように、5つの値がそのまま1行になります。
- 水平オフセット（X）：影を左右にずらす量。正で右、負で左へ。光が当たる向きを表します（スライダーは-50〜50px）。
- 垂直オフセット（Y）：影を上下にずらす量。正で下へ。現実の光は上から来るので、Yを少し正にすると自然です。
- ぼかし半径（blur）：影の輪郭のにじみ。0でくっきり、大きいほど柔らかく拡散します（0〜100px）。
- 広がり半径（spread）：影そのものを膨らませ（正）、縮め（負）る量。ぼかしと組み合わせて面積を微調整します（-50〜50px）。
- 色と不透明度：HEXで指定した色と、%で指定した濃さ。両者は rgba() にまとめて出力されます。
不透明度はrgba()のアルファに変換される
本ツールでは色をHEX、濃さを不透明度スライダーで別々に指定しますが、出力では両者が1つの rgba() に合成されます。不透明度は 100 で割った値がアルファになるため、25%なら 0.25、18%なら 0.18 です。既定色は RGB 26,34,48 の濃紺グレーなので、不透明度を30%にすると rgba(26, 34, 48, 0.3) と書き出されます。影を真っ黒（#000000）にせず、背景になじむ濃色を薄く重ねるのが、上品に見せるための基本です。色はカラーピッカーとHEXテキストのどちらからでも指定でき、片方を変えるともう片方も同期します。
プリセットで素早く当たりを付ける
「繊細・カード・浮遊・立体・内側」の5つのプリセットは、代表的な影の値をワンタップでスライダーにセットします。狙いに近いものを選んでから微調整すると早く仕上がります。
- 繊細：0px 1px 3px 0px・濃さ12%。境界を軽く示すだけの控えめな影。
- カード：0px 4px 12px 0px・濃さ18%。記事カードなどの標準的な浮き。
- 浮遊：0px 12px 28px -4px・濃さ22%。広がりを-4pxにして裾を締めた、高く浮いた影。
- 立体：0px 20px 40px 0px・濃さ28%。モーダルなど、強く持ち上げたいとき。
- 内側：inset 0px 2px 6px 0px・濃さ22%。くぼみを表す内側の影。
自然な影に見せるコツ
影が不自然に見える原因の多くは、現実の光の振る舞いから外れていることです。次の点を守るとぐっとそれらしくなります。
- 光源を1方向に固定する：ページ内の要素でYを正・Xをほぼ0に揃えると、同じ光の下にある一貫した空間に見えます。プリセットがどれもX=0なのはこのためです。
- 薄く始める：不透明度は12〜25%程度から。濃さは後から足せますが、濃く付けた影を薄くやり直すのは手戻りが大きくなります。
- 高く浮かせるほど大きく薄く：オフセットとぼかしを増やすときは、不透明度を上げすぎないほうが空気感が出ます。現実でも、高い位置の影は広く薄くぼけます。
内側の影（inset）の使いどころ
「内側（inset）」に切り替えると、生成CSSの先頭に inset が付き、影が要素の外ではなく内側に落ちます。押し込まれた・へこんだ表現になり、フォーム入力欄をわずかにくぼませて「ここに入力する」と伝えたり、トグルやボタンの押下状態を示したりするのに向きます。本ツールは1回に1つの影を出力しますが、外側の影のCSSと inset の影のCSSをカンマでつなげば、縁の立ち上がりと内側の陰影を同時に与えることもできます。inset の色を白系にすれば、内側からのハイライトとして立体感を足す使い方もできます。
よくある失敗と多重影のコツ
見た目でつまずきやすいのは次のパターンです。
- 濃すぎる・真っ黒：不透明度が高い純黒の影は、要素が浮きすぎて汚れのように見えます。薄い濃色に落としましょう。
- ぼかし0で大きなオフセット：輪郭がくっきりしたまま大きくずれると、影というより二重写しに見えます。距離を出すならぼかしも増やします。
- 向きの不一致：要素ごとに影の方向が違うと光源が定まらず、全体が安っぽくなります。
よりリアルにしたいときは多重影が有効です。本ツールで「カード」相当の近い影を1本つくってコピーし、続けて「浮遊」相当の遠い薄い影をつくって、2つの出力をカンマでつなぎます。近い影が接地感を、遠い影がやわらかな奥行きを担い、単一の影より自然な立体感になります。マテリアルデザイン風の「高さ」の表現も、この重ね方が基本です。