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

CSS デザイン UI フロントエンド
結論

**「影を薄く、広く」**設定するのがきれいな影のコツ。濃すぎる影（不透明度0.5以上）はデザインが古く見え、ユーザーに圧迫感を与えます。

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

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

よく使う設定値

浮き具合 推奨CSS (box-shadow)
ほんの少し（低） `0 1px 3px rgba(0,0,0,0.12)`
標準（中） `0 4px 6px -1px rgba(0,0,0,0.1)`
強調（高） `0 10px 15px -3px rgba(0,0,0,0.1)`

🌘 この場でbox-shadowを生成する

各パラメータの意味

X/Y offset＝影のずれ方向、Blur＝ぼかし、Spread＝広がり、色・不透明度＝影の見た目。スライダーを動かすとプレビューが即時反映されます。

15%
影がここに表示 
  
 
 
  
  


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


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


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


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