💡 この記事でわかること
- box-shadowとは何か
- 基本の書き方(値の並び順と意味)
- ぼかし・広がり・色の指定方法
- 内側に影をつける(inset)の使い方
- 複数の影を重ねるテクニック
1. box-shadowとは?
box-shadowとは、
👉 要素に影(シャドウ)をつけるためのCSSプロパティです。
💡 カードやボタン、モーダルウィンドウなどに立体感を出したいときによく使われます。影の付け方ひとつで、要素の「浮いている感じ」や「押し込まれている感じ」を表現できます。
2. 基本の書き方
box-shadowは、次のように複数の値をスペース区切りで指定します。
.box {
box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.3);
}それぞれの値の意味は次の通りです。
- 1番目(2px):横方向のずれ(h-offset)。プラスで右、マイナスで左にずれる
- 2番目(4px):縦方向のずれ(v-offset)。プラスで下、マイナスで上にずれる
- 3番目(8px):ぼかしの強さ(blur-radius)。数値が大きいほど影がぼやける
- 4番目(0px):影の広がり(spread-radius)。省略可能で、プラスで影が広がる
- 5番目(rgba(...)):影の色。省略すると多くのブラウザで黒系の色が使われる
👉 色にはrgba()を使い、透明度(4番目の数値)を0.2〜0.4程度にすると、自然でやわらかい影になります。黒(#000)をそのまま使うと影が濃すぎて不自然に見えることが多いので注意しましょう。
3. 内側に影をつける(inset)
先頭にinsetを付けると、影が要素の外側ではなく内側に表示されます。
.box {
box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.3);
}💡 ボタンが押し込まれたような、へこんだ見た目を表現したいときにinsetが使われます。フォームの入力欄(input)に軽くinsetの影をつけて、くぼんだ印象を出すのもよくあるパターンです。
4. 複数の影を重ねる
box-shadowは、,(カンマ)で区切ることで複数の影を同時に重ねることができます。
.box {
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.2),
0px 4px 12px rgba(0, 0, 0, 0.15);
}👉 近い距離のはっきりした影と、遠い距離のぼんやりした影を重ねると、より自然な立体感を出せます。Material Designなどのデザインシステムでも、複数の影を重ねる手法がよく使われています。
5. よくある使用例
box-shadowは、次のような場面でよく使われます。
- カードUI(ふわっと浮いたような見た目にする)
- ボタンのホバー時に影を強くして「押せそう」な印象を出す
- モーダルウィンドウを背景から浮き上がらせる
- フォーム入力欄にうっすらinsetの影をつける
👉 CSSのborder-radiusについての記事はこちら
⚠️ 影を強くしすぎるとデザインがうるさくなるので、ぼかし・透明度は控えめから試すのがおすすめです。特に複数の要素に同じ影を使う場合は、CSS変数(カスタムプロパティ)で影の値を管理すると統一感を出しやすくなります。
📝 まとめ
- box-shadowは要素に影をつけるプロパティ
- 値の順番は「横のずれ・縦のずれ・ぼかし・広がり・色」
- insetを付けると内側に影がつく
- カンマ区切りで複数の影を重ねられる
- 色はrgba()で透明度を付けると自然に見える
実際に数値を変えながらブラウザで確認すると、影の付き方の違いが直感的に理解できます。ぜひ手を動かして試してみてください。