約3分で読めます
CSSのbox-shadowの使い方|影で奥行きを出すデザイン入門
box-shadowとは
box-shadow は、要素に影を付けるCSSプロパティです。ボタンやカードに影を付けることで、画面に「奥行き」や「浮いている感じ」を表現でき、クリックできそうな印象や情報の階層を伝えられます。
値の構成
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
左から順に、次の意味を持ちます。
| 値 | 意味 |
|---|---|
| 1つ目(X) | 横方向のオフセット(正で右) |
| 2つ目(Y) | 縦方向のオフセット(正で下) |
| 3つ目(blur) | ぼかしの大きさ。大きいほど柔らかい影 |
| 4つ目(spread) | 影の広がり。正で拡大、負で縮小 |
| 色 | 影の色。rgba で透明度を指定するのが定番 |
自然な影を作るコツ
不自然に見える影の多くは「濃すぎ」「真っ黒」が原因です。次のポイントを押さえると上品になります。
- 影の色は黒のべた塗りではなく
rgba(0,0,0,0.1)程度の薄い半透明にする - Y方向に少しだけ落とし(光が上から当たる想定)、blurを大きめにとる
- 距離が近い要素は薄く小さい影、浮いている要素は濃く大きい影にする
影を重ねて立体感を出す
, で区切ると複数の影を重ねられます。近い影と遠い影を組み合わせると、より自然な立体感になります。
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.12);
insetで内側の影に
先頭に inset を付けると、外側ではなく内側に影が落ちます。へこんだ入力欄や押し込まれたボタンの表現に使えます。
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
ツールで試しながら作る
数値を手で調整しながら結果を確認するのが一番の近道です。CSSボックスシャドウ生成ツールでは、スライダーで各値を動かしてリアルタイムにプレビューし、できたCSSをそのままコピーできます。影の重ねがけにも対応しています。
背景のグラデーションはCSSグラデーション生成、色選びはカラーピッカーと組み合わせると、UIの仕上げが一気に進みます。
まとめ
box-shadowは X・Y・ぼかし・広がり・色で影を指定する- 影は薄い半透明+大きめのぼかしが上品
,で重ねると自然な立体感、insetで内側の影- ボックスシャドウ生成ツールでプレビューしながら作るのが速い