CSS ・ 枠線・装飾
box-shadow
影
要素の外側（または内側）に影を付けます。ずらす距離・ぼかし・広がり・色を組み合わせて指定します。
01
サンプルコード
HTML
1<div class="row">
2 <div class="box soft">やわらかい影</div>
3 <div class="box hard">くっきりした影</div>
4 <div class="box inset">内側の影</div>
5</div>
CSS
1body {
2 background: #f5f3f0;
3}
4.row {
5 display: flex;
6 gap: 20px;
7}
8.box {
9 width: 130px;
10 padding: 20px 0;
11 text-align: center;
12 background: #fff;
13 border-radius: 6px;
14 font-size: 13px;
15}
16.soft {
17 box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
18}
19.hard {
20 box-shadow: 4px 4px 0 #b68235;
21}
22.inset {
23 box-shadow: inset 0 2px 6px rgb(0 0 0 / 20%);
24}
02
実行結果
ブラウザでの表示
03
解説
box-shadow は要素に影を付けるプロパティです。値は「横のずれ 縦のずれ ぼかし 広がり 色」の順に書きます。ぼかしと広がりは省略できます。
色に透明度の低い黒を使い、ぼかしを大きめにすると、自然でやわらかい影になります。
先頭に inset を付けると内側の影になります。カンマで区切ると、複数の影を重ねられます。
04
応用例・注意点
値の書き方
| 値 | 説明 |
|---|---|
0 4px 16px rgb(0 0 0 / 12%) | 下に4pxずらし、16pxぼかした影 |
4px 4px 0 #b68235 | ぼかしなしのくっきりした影 |
0 0 0 3px #b68235 | 広がりだけで枠線のように見せる |
inset 0 2px 6px … | 内側の影 |
none | 影なし |
マウスを乗せると浮き上がるカード
影と transform を組み合わせると、浮き上がる動きになります。
CSS
1.card {
2 transition: box-shadow .2s, transform .2s;
3}
4.card:hover {
5 box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
6 transform: translateY(-2px);
7}
注意点
- 01影を濃くしすぎると古い印象になりがちです。透明度は10〜20%程度から試します。
- 02影は要素の大きさに含まれず、ほかの要素に重なって表示されます。