【CSS】backdrop-filterの使い方を解説｜背景をぼかす・明るくする表現を簡単実装

Webデザインで近年よく見かける「ガラスのような半透明パネル」や「背景だけがぼけるカード」は、実は CSS の backdrop-filter プロパティを使うと簡単に実装できます。

この記事では backdrop-filter の基本から、よく使う効果、実用例、注意点までわかりやすく解説します。

背景をぼかすなどの表現を実装したい方は、ぜひ当記事をチェックしてください。

backdrop-filterとは？

backdrop-filter は、要素の背後にある領域に対してフィルター効果を適用できる CSS プロパティです。

ポイントは 「要素そのものではなく、背景だけにフィルターをかける」 という点。

たとえば、

• 背景をぼかす（blur）
• 背景を暗くする（brightness）
• ガラスのような透明パネルの質感をつくる

といったことが簡単にできます。

基本的な使い方

blur（ぼかし）を適用する例

以下のようなコードでボカシを表現することができます。

.card {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.3);
}

実際の使用例は以下のようなイメージです。

<div class="container">
  <div class="card">
    <h2>SAMPLE</h2>
  </div>
</div>

.container {
  background-image: url(https://picsum.photos/seed/picsum/200/300);
  padding: 50px;
  background-size: contain;
}
.card {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.3);
  padding: 50px;
}

ポイント

• backdrop-filter だけでは何も起こらず、背景が透けるように半透明の背景色（rgba や transparent）が必要
• ガラス風なら background: rgba(255,255,255,0.1〜0.3) が定番

backdrop-filter で使える主な効果一覧

複数のフィルターを同時に使う

backdrop-filterには複数の値を設定することができます。

.card {
  backdrop-filter: blur(8px) brightness(120%);
}

具体例：グラスモーフィズム

もっともよく使う「グラスモーフィズム」の例です。

.glass {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  padding: 20px;
}

<div class="container">
  <div class="glass">
    <h2>SAMPLE</h2>
  </div>
</div>

.container {
  background-image: url(https://picsum.photos/seed/picsum/200/300);
  padding: 50px;
  background-size: contain;
}
.glass {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  padding: 20px;
}

ポイント

• 半透明＋ぼかし＋白い境界線の組み合わせが “ガラス感” を生む
• 暗い背景の上に置くと特に映える

実用的な UI 例（コード付き）

半透明ナビゲーションバー

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

モーダルの背景ぼかし

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

ユーザーに「背景の状態が変わった」と伝える視覚効果として非常に便利です。

まとめ

• backdrop-filter は背景にだけフィルターをかける CSS
• ガラス風 UI や背景ぼかしが簡単に実現できる
• blur 以外にも brightness・contrast など多彩
• 背景には 半透明色 を使うこと
• Safari 用のベンダープレフィックスも忘れずに

backdrop-filter を使えるようになると、UI の表現力が一段上がります。
ぜひ自分のサイトにも取り入れてみてください！

参考サイト

• backdrop-filter – CSS | MDN