Newly available 条件付きOK。主要ブラウザで対応しているが、Safari は18以降。

backdrop-filter

backdrop-filter は CSS のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の背後にあるすべてに適用されるため、要素またはその背景が透明または部分的に透明である必要があります。

エフェクトぼかし

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
backdrop-filter
76
79
103
18
76
18
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (79)
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (17)
注釈 1件
実装メモ
  • Firefox 123 より前では、このプロパティは、不明な GPU ベンダーを搭載したシステムではサポートされていませんでした (バグ 1868737 を参照)。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (9)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (9)

基本構文

CSS 
.glass-panel {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}

.navbar {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

ライブデモ

glasseffect(blur)

backdrop-filter glasseffect(blur) demo.

プレビュー全画面表示

blur + saturate

backdrop-filter Blur + saturate demo.

プレビュー全画面表示

darkoverlay

backdrop-filter darkoverlay demo.

プレビュー全画面表示

実務での使いどころ

  • フロストグラス効果

    ナビバーやカードに半透明＋ぼかしのすりガラス風デザインを適用する。

  • モーダルオーバーレイ

    モーダル背景にblurを適用し、背後のコンテンツをぼかしてフォーカスを強調する。

注意点

  • backdrop-filter はレンダリングコストが高い。モバイルデバイスでの過度な使用はパフォーマンスに影響する。
  • Safari では -webkit-backdrop-filter プレフィックスが必要な場合がある。

フォールバック戦略

CSS 
/* backdrop-filter 非対応ブラウザ向けフォールバック */
@supports not (backdrop-filter: blur(1px)) {
  .glass-panel {
    background: rgba(255, 255, 255, 0.85);
  }
}

アクセシビリティ

  • 背後のコンテンツがぼかされても、前面のテキストと背景のコントラスト比を十分に確保する。

参考リンク