CSSで浮き出るカードを作る｜きれいなbox-shadowの数値設定

きれいな影を作る3つのルール

1. 不透明度を下げる — rgba(0, 0, 0, 0.1) 程度まで薄くする。
2. ぼかし（Blur）を大きく取る — 影をぼかすことで、自然な光の拡散を表現。
3. 影を少し下にずらす — offset-y を正の値にすることで、上からの光源をシミュレート。

よく使う設定値

実践テクニック：影の重ね合わせ

単一の影よりも、複数の影を重ねる（Layered Shadows）とよりリッチな質感になります。

.card {
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.06), 
    0 4px 8px rgba(0,0,0,0.12);
}

このように、濃くて小さい影と、薄くて広い影を組み合わせることで、境界がはっきりしつつも柔らかな印象のUIになります。

関連記事

この記事は フロントエンド・CSS テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。