backdrop-filter

アニメーション・エフェクト

要素の背後にあるコンテンツにフィルター効果を適用するプロパティです。ガラス効果やぼかし効果を作成できます。

構文

Syntax

backdrop-filter: <filter-function>

.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

実行結果

ガラス効果

ガラス効果（グラスモーフィズム）の実装

.modal-overlay {
  backdrop-filter: blur(5px) brightness(0.7);
  background: rgba(0, 0, 0, 0.3);
}

実行結果

モーダル背景

モーダル背景のぼかしと暗化

backdrop-filter: saturate(180%) blur(20px);

実行結果

彩度+ぼかし

彩度を上げてぼかし効果を適用

iOS Safari風のデザインに最適。パフォーマンスに注意して使用。

背景が透明でないと効果が見えない。

Chrome 76+, Firefox 103+, Safari 9+