box-shadow
box-shadow
概要（サマリー）
box-shadow とは、要素に影を付けて、浮き上がりやへこみを表現するCSSのプロパティのことである。カードやボタンがうっすら浮いて見えるのは、たいていこの1行が効いている。
現実の世界では、物が浮いていれば下に影ができる。画面は平らな1枚の面だが、そこに影を描くと「手前にある」「奥にある」という奥行きの錯覚が生まれる。box-shadow は、その錯覚をCSSで作るための道具である。
以下は、影の設定を切り替えて見比べられるデモである。
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
詳細解説
5つの値の意味
box-shadow は、値を並べて書く。それぞれの位置に意味がある。
box-shadow: 0 8px 24px 0 rgba(15, 23, 42, 0.15);
/* ① ② ③ ④ ⑤ */
- ① 横方向のずれ: 正の値で右へ、負の値で左へずれる
- ② 縦方向のずれ: 正の値で下へ、負の値で上へずれる
- ③ ぼかし半径: 大きいほど影の輪郭がぼやける。
0にすると輪郭のはっきりした影になる - ④ 広がり: 影そのものを太らせる・痩せさせる。省略可能
- ⑤ 影の色: RGBの不透明度付き表記（
rgba）で薄く指定するのが一般的
最低限、①②③⑤の4つがあれば形になる。単位はピクセル（px）を使うことが多い。
自然に見える影の作り方
初心者がつまずきやすいのが「影が汚く見える」問題である。原因はたいてい次の2つだ。
濃すぎる。 影を黒（#000000）でそのまま置くと、絵の具を塗ったように重くなる。rgba(0, 0, 0, 0.1) 程度まで薄めるとよい。さらに、背景色に合わせて青系や紫系にわずかに寄せる（例: rgba(15, 23, 42, 0.12)）と、画面になじむ。
光の向きが揃っていない。 現実の光は基本的に上から差す。したがって影は下に落ちる。横方向のずれを 0、縦方向のずれを正の値にするのが基本形である。ページ内のすべての影で光の向きを揃えないと、要素ごとに光源が違う不自然な画面になる。
/* 使いやすい基本形 */
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); /* 少し浮いている */
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15); /* しっかり浮いている */
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22); /* 手前に大きく浮いている */
浮いている高さが大きいほど、縦のずれとぼかしを両方大きくし、色を少し濃くする。この3つを連動させると自然になる。
影を重ねて質感を出す
box-shadow は、カンマで区切って何枚でも重ねられる。実務では2〜3枚重ねることが多い。
.card {
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06), /* 接地部分の短く濃い影 */
0 8px 24px rgba(15, 23, 42, 0.10); /* 広く薄い影 */
}
現実の影は、物の真下にできる濃い影と、周囲へ広がる淡い影が重なってできている。1枚だけだとのっぺりしがちだが、2枚重ねると急に自然になる。
内側の影（inset）
inset を付けると、影が要素の内側に描かれる。へこんで見える表現になる。
/* 押し込まれたような入力欄 */
.input {
box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.12);
}
この内側の影と外側の影を組み合わせると、背景と同じ色のまま凹凸だけで形を表す「ニューモーフィズム」と呼ばれる表現になる。ただし境界線がほとんど見えなくなるため、ボタンなのか飾りなのか判別しづらくなりやすい。使うなら、押せる場所が分かる工夫を別に用意したい。
border との違い、filter との違い
似た見た目を作れるプロパティがいくつかある。役割を分けて覚えるとよい。
- border: 要素の輪郭線。要素の大きさに影響する（
box-sizingの指定によってはレイアウトがずれる） - box-shadow: 影。要素の大きさに影響しない。他の要素を押しのけない
- outline: 輪郭線だが大きさに影響しない。キーボード操作時のフォーカス表示に使われるので、装飾目的で消さない
- filter: drop-shadow(): 要素の形に沿った影を落とす。透過PNGや
svgのアイコンなど、四角くない形に影を付けたいときはこちら
box-shadow は要素の四角い箱の形（角丸を含む）に沿って影を描く。切り抜かれた画像に影を付けたい場合、box-shadow では四角い影になってしまうので drop-shadow() を使う。
使うときの注意点
- 影のアニメーションは重い。ホバーで影を大きくする演出は多いが、ぼかし半径の大きな影を頻繁に描き直すとレンダリング負荷が上がる。滑らかさを優先するなら、影を2枚用意して
opacityで切り替える方法もある - ダークモードでは効かない。暗い背景の上に黒い影を落としても見えない。ダークモードでは、影の代わりに境界線や、背景よりわずかに明るい面で階層を表現する
- 影だけで意味を伝えない。「押せる」ことを影だけで示すと、影が見えにくい環境では伝わらない。色・文字・カーソル形状などと組み合わせる
NOVEBLOには、box-shadow の値をその場で作れるツールと、使い方をまとめたページがある。
AIコーディングとの関係
box-shadow は値の並びが決まっているので、AIは正しい書式のコードを返してくれる。ただし、出てくる影は「濃すぎる」「1枚だけでのっぺりしている」ことが多い。伝え方を具体的にすると仕上がりが変わる。
- どれくらい浮かせたいか（かすかに / しっかり / 大きく手前に）
- 光の向きを上からに揃えてほしいこと
- 影を2枚重ねて自然にしてほしいこと
- ダークモードでの代替表現
たとえば「カードに影を付けて。上から光が当たっている想定で、接地部分の短い影と広く薄い影の2枚を重ねて。色は黒ではなく rgba(15, 23, 42, ...) 系で薄めに。ダークモードのときは影ではなく境界線で階層を出して」と伝えると、そのまま使える形になる。
生成後に確認したいのは、影の濃さとページ全体での統一である。1か所だけ見れば良く見えても、他のカードと影の強さがばらばらだと画面が落ち着かない。浮きの段階を2〜3種類に決めて、それを使い回すとまとまる。
よくある勘違い
box-shadow は要素の大きさを変える？
変えない。影は描画されるだけで、レイアウト上の場所を占有しない。だから隣の要素を押しのけることもない。この点が border との大きな違いで、ホバーで影だけを変える演出がガタつかないのはこのためである。
影は黒にするのが正解？
黒をそのまま置くと重く濁って見える。不透明度を下げて薄くし、背景色に合わせてわずかに色味を寄せると自然になる。「影 = 黒」ではなく「影 = 背景より少し暗い色」と考えるとよい。
透過画像に box-shadow を付ければ形に沿う？
box-shadow は要素の箱の形に沿うので、切り抜かれた画像に付けても四角い影になる。形に沿った影が欲しいときは filter: drop-shadow() を使う。
影は多いほど立体的に見える？
すべての要素に強い影を付けると、どれが手前か分からなくなり、かえって平坦に見える。奥行きは相対的なものなので、強調したい要素だけを強く浮かせ、他は控えめにするほうが立体感が出る。
まとめ
- box-shadow は、要素に影を付けて浮き上がりやへこみを表現するCSSのプロパティである
- 値は「横のずれ・縦のずれ・ぼかし・広がり・色」の順に並べる
- 黒をそのまま使わず薄く、光の向きはページ全体で上から揃えると自然になる
- カンマ区切りで影を重ねられる。2枚重ねると質感が大きく向上する
- 要素の大きさに影響しない。切り抜き画像に形どおりの影を付けたいときは
filter: drop-shadow()を使う
情報ソース
より詳しくAIに聞いてみよう
- box-shadow の5つの値がそれぞれ何を表すのか、図解のように順を追って説明してください。
- 自然に見える影を作るコツを、悪い例と良い例を対比して教えてください。
- box-shadow と filter: drop-shadow() の違いを、使い分けの判断基準つきで整理してください。
- ダークモードで影が見えなくなる問題に、どう対処すればよいですか。
- AIにカードデザインのCSSを生成してもらうとき、影の強さをサイト全体で統一するにはどう指示すればよいですか。