CSSで影をつける方法（box-shadow）の基本
影は box-shadow でつけます。値は「横位置 縦位置 ぼかし 広がり 色」の順です。
基本の書き方
.card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
/* X=0 Y=4 ぼかし=12 色=黒15% */
}値の意味
| 値 | 意味 |
|---|---|
| 1つ目 | 横方向のずれ（X） |
| 2つ目 | 縦方向のずれ（Y） |
| 3つ目 | ぼかしの大きさ |
| 4つ目 | 影の広がり（省略可） |
内側の影
.inset { box-shadow: inset 0 2px 6px rgba(0,0,0,.2); }自然に見せるコツは、色を黒の半透明（rgba）にして薄くすること。濃い真っ黒だと不自然になります。
よくある質問
影が濃すぎて不自然です
色を rgba(0,0,0,0.1〜0.2) のように薄い半透明にし、ぼかしを大きめにすると自然になります。
複数の影は重ねられますか？
はい。box-shadow をカンマで区切って複数指定でき、立体感のある影を作れます。