Box Shadow CSS 生成｜Material デザイン・自然なドロップシャドウの作り方

CSS box-shadow UI
結論：30秒で綺麗な CSS 影を作る
  • 自然な影の基本: box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  • 黄金ルール: ぼかし（Blur）を大きく、カラーのアルファ値（Alpha）は 10% 以下に下げる
  • 生成ツール: 下のコンポーネントでリアルタイムプレビュー＆CSS コピー

1. オンライン Box Shadow CSS ジェネレーター

スライダーでパラメータを調整し、カード UI への浮き感を視覚的にプレビューしながらコードを生成します。

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

各パラメータの意味

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

15%
影がここに表示 
  
 
 
  
  




2. 実務でそのまま使えるスタイルコード例


① モダンなカード UI（エレガントな浅い影）


.card {
  background: #ffffff;
  border-radius: 12px;
  /* ほんのり浮かせる上品な影 */
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08);
}


② レイヤー重ね影（マルチシャドウ・高品位）


.card-hover:hover {
  /* 近接影と環境光の 2 重重ね指定 */
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}




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


    

  1. 真っ黒（rgba(0,0,0,0.5) 等）の過剰な影指定

      

    • 濃い影を付けるとデザインが一気に古臭く（レトロに）見えます。不透明度は 0.05 〜 0.15 の間に収めるのが現代の UI トレンドです。
      • 

    

    2. 

  2. box-shadow の多用による重いペイントコスト

      

    • 大きな blur や広範囲の box-shadow を付けた要素を大量に並べたりアニメーションさせると、GPU/CPU のペイントコストが跳ね上がります。アニメーション時は transform: translateY() と opacity で代替するのがパフォーマンス上安全です。
      • 

    

    3.