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

CSS デザイン UI フロントエンド HTML
結論：30秒で洗練された box-shadow を作る
  • カラー: rgba(0, 0, 0, 0.08) （黒 8% 程度の薄い色）
  • ぼかし: 12px〜24px （広くぼかす）
  • ジェネレーター: 下のツールでリアルタイムプレビューしながらコード作成

1. オンライン CSS Box Shadow 生成ツール

スライダー操作で立体感（Offset / Blur / Spread / カラー）をリアルタイム調整し、CSS コードを出力できます。

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

各パラメータの意味

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

15%
影がここに表示 
  
 
 
  
  




2. よく使う設定値一覧


  
  
  浮き具合    推奨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) 
  
 




3. 実践テクニック：2層の重ね合わせ（Layered Shadows）


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

.card:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 4px 6px rgba(0,0,0,0.08), 
    0 12px 20px rgba(0,0,0,0.15);
}




4. 注意点（ハマりどころ）


    

  1. will-change や パフォーマンス低下

      

    • 多量の要素（100個以上のカードリスト）に大きな blur 値の box-shadow を指定しスクロールさせると、GPU レンダリングコストが高まりフレームレートが落ちる場合があります。
      • 

    

    2.