影の付け方 — box-shadow の4つの数字の意味

影は、要素を浮いているように見せる指定です。コピペで済ませてしまいがちですが、数字の意味は単純です。

4つの数字と色

.card {
  /* 横 / 縦 / ぼかし / 広がり / 色 */
  box-shadow: 0 2px 8px 0 rgba(27, 42, 56, 0.12);
}

• 横 … 右にずらす量。0なら真下に落ちる
• 縦 … 下にずらす量。プラスで下に落ちる
• ぼかし … 大きいほどふんわりする。0だとくっきりした影になる
• 広がり … 影自体を大きくする。省略できる（0扱い）
• 色 … 半透明の黒にするのが自然

自然に見せる3つのコツ

• 横は0にする … 光は基本的に上から当たるので、真下に落ちるほうが自然
• 色は黒の半透明にする … 灰色の影は濁って見える。rgba で薄く落とす
• 濃くしすぎない … 0.1〜0.2くらいが目安。0.5などにすると急に古く見える

影が「ダサく」見えるとき、原因はたいてい濃さです。薄くするだけで、ぐっと今っぽくなります。

内側に影を落とす

inset を先頭に付けると、影が内側に入ります。へこんだ表現や、入力欄の奥行きを出すときに使います。

影は重ねられる

カンマで区切ると、複数の影を重ねられます。「小さく濃い影」と「大きく薄い影」を組み合わせると、より自然な立体感が出ます。プロっぽく見える影は、たいてい2〜3枚重ねてあります。

文字にも影を付けられる

text-shadow は、書き方は同じで「広がり」がないだけです。写真の上に置いた白い文字を読みやすくするときに使います。装飾目的で本文に付けるのは、読みにくくなるので避けてください。

影より線のほうが合う場面もある

影は「浮いている」ことを表す表現です。表やコード面のように、平らに並んでいるべきものに影を付けると落ち着きません。面を区切りたいだけなら、薄い線のほうが自然に見えます。使い分けを意識すると、画面全体が締まります。