backdrop-filter
backdrop-filter は要素自体ではなく、その背後に見えるコンテンツにフィルターを適用する。半透明の背景と組み合わせることで、すりガラス（フロストグラス）効果を実現できる。macOS/iOS風の洗練されたUI表現に広く使われている。blur・brightness・saturate などのフィルター関数を使用可能。
概要
backdrop-filter は要素自体ではなく、その背後に見えるコンテンツにフィルターを適用する。半透明の背景と組み合わせることで、すりガラス（フロストグラス）効果を実現できる。macOS/iOS風の洗練されたUI表現に広く使われている。blur・brightness・saturate などのフィルター関数を使用可能。
対応ブラウザ
デスクトップ
Chrome 76+
Edge 79+
Safari 18+
Firefox 103+
モバイル
Chrome Android 76+
Safari iOS 18+
Firefox Android 103+
基本構文
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);
}実務での使いどころ
-
フロストグラス効果
ナビバーやカードに半透明＋ぼかしのすりガラス風デザインを適用する。
-
モーダルオーバーレイ
モーダル背景に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);
}
}アクセシビリティ
- 背後のコンテンツがぼかされても、前面のテキストと背景のコントラスト比を十分に確保する。