【CSS】backdrop-filterでガラス風デザインを実装する方法

ガラス越しのように背景をぼかす「ガラスモーフィズム」デザインは、近年のUIで人気のスタイルです。CSSのbackdrop-filterプロパティを利用することで、半透明の背景に背後の要素をぼかし込む表現が可能になります。ここでは基本構文から応用例、対応ブラウザやフォールバックまでを解説します。

backdrop-filterの基本
最小例：ぼかし付き半透明ボックス
複数フィルターを組み合わせる
ナビゲーションバーへの応用
アクセント付きのカードデザイン
対応ブラウザと注意点
まとめ

backdrop-filterの基本

backdrop-filterは要素の背後にあるコンテンツに対してフィルターをかけます。ぼかし（blur）、彩度変更（saturate）、明るさ調整（brightness）などを組み合わせて、ガラス風の質感を作ります。利用する要素には半透明な背景色（rgbaや透過グラデーション）が必須です。完全に不透明だと背後が見えず効果が出ません。

最小例：ぼかし付き半透明ボックス

<div class="glass-box">
  <h2>ガラス風デザイン</h2>
  <p>CSSだけで実現できます。</p>
</div>

body {
  background: url('bg.jpg') no-repeat center/cover;
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.glass-box {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 24px 32px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari用 */
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}

背景画像の上に置くと、ボックスの背後がぼやけてガラス越しのように見えます。

複数フィルターを組み合わせる

saturateやbrightnessを加えると鮮やかさや明度を調整できます。透明感や視認性を上げたいときに有効です。

.glass-box {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(16px) saturate(120%) brightness(110%);
  -webkit-backdrop-filter: blur(16px) saturate(120%) brightness(110%);
  border: 1px solid rgba(255,255,255,0.3);
}

ナビゲーションバーへの応用

固定ナビゲーションバーにガラス風効果を加えると、スクロール時に背後が自然にぼけてモダンな印象になります。

<header class="glass-nav">
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

.glass-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 12px 24px;
}
.glass-nav a {
  margin-right: 16px;
  color: #fff;
  text-decoration: none;
}

アクセント付きのカードデザイン

ガラスボックスにグラデーションの境界線や影を加えると高級感が出ます。

.glass-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 4px 30px rgba(0,0,0,0.2);
}

対応ブラウザと注意点

backdrop-filterはChrome、Safari、Edge、Firefox（要設定）など主要ブラウザでサポートされていますが、古い環境では効かないことがあります。フォールバックとして半透明の背景色や代替の単色デザインを用意しておくと安心です。また、GPUリソースを多く使うため、複数の要素に高解像度のblurを適用するとパフォーマンスに影響が出る可能性があります。