CSS backdrop-filter完全ガイド｜ぼかし・透明UIの作り方

CSS backdrop-filter完全ガイド｜ぼかし・透明UIの作り方

透明感のあるUIやガラスのようなデザインを実現する際に欠かせないのが、backdrop-filter です。
背景をぼかすことで奥行きや視認性を高め、モダンなUIを作ることができます。

この記事では、backdrop-filterの基本から実践的なUIパーツまでを、コピペOKのコード付きで解説します。

backdrop-filterとは？

backdrop-filterは、要素の「背面（背景）」に対してフィルター効果を適用するCSSプロパティです。

  • blur（ぼかし）
  • brightness（明るさ）
  • contrast（コントラスト）
  • grayscale（グレースケール）

通常の filter は要素自体に作用しますが、backdrop-filterは背面に作用するのが最大の特徴です。

filterとの違い

プロパティ対象
filter要素自身
backdrop-filter背景（背面）

例えば、画像をぼかす場合はfilter、背景をぼかしたい場合はbackdrop-filterを使います。

基本の使い方（ぼかし）

HTML

HTML
<div class="blur-box">
  背景がぼけるボックス
</div>

CSS

CSS
body {
  background: url(bg.jpg) center/cover no-repeat;
}

.blur-box {
  color: #fff;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 30px;
}

ポイント：透明な背景（rgba）がないと効果が見えません。

背景がぼけるボックス

実践① ガラスカードUI

CSS
.glass-card {
  color: #fff;
  border-radius: 16px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  padding: 30px;
}

Glassmorphismの基本形です。

ガラスカードUI

実践② ナビゲーションバー（透過ヘッダー）

CSS
.glass-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  padding: 20px;
  z-index: 100;
}

スクロール時も背景が透けて見えるため、洗練された印象になります。

ヘッダー

実践③ モーダルオーバーレイ

CSS
.glass-overlay {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.4);
}

背景全体をぼかすことで、モーダルに視線を集中させることができます。

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

CSS
.box {
  backdrop-filter: blur(10px) brightness(1.2) contrast(1.1);
}

ぼかし＋明るさ調整などを組み合わせると、よりリッチな表現が可能です。

よくある失敗と対処法

  • 透明背景がない → rgbaを使う
  • 効果が見えない → 背景に画像や色を入れる
  • 効かない → ブラウザ対応を確認

ブラウザ対応とフォールバック

backdrop-filterは一部環境で未対応の場合があります。

CSS
.box {
  background: rgba(255,255,255,0.8); /* フォールバック */
  backdrop-filter: blur(10px);
}

未対応環境でも見た目が崩れないように設計しましょう。

パフォーマンスの注意点

  • ぼかしはGPU負荷が高い
  • 多用しすぎない
  • 大きな要素に使うと重くなる

アクセシビリティ対応

CSS
@media (prefers-reduced-motion: reduce) {
  .header {
    backdrop-filter: none;
  }
}

動きや視覚効果が強い場合は、ユーザー設定に配慮しましょう。

まとめ

  • backdrop-filterは背景に作用するフィルター
  • 透明UI・ガラスデザインに最適
  • Glassmorphismと相性抜群

適切に使うことで、ワンランク上のUIデザインが実現できます。

Altieのワンポイント

Altie：「blurを強くしすぎると読みにくくなるよ！“見た目”と“可読性”のバランスが大事！」

関連記事

PAGE TOP