今回は下に重なっている要素をぼかす方法を説明します。
例として、モーダルをあげています。モーダルを開く際に、<div id="overlay"><div>という要素にactiveというクラス名をつけることで表示させており、この要素にbackdrop-filter: blur(4px);というCSSをあてることで、この要素の下に重なっているレイヤーがぼやけて見えます。backdrop-filterプロパティはぼかし以外にも様々なエフェクトをつけることができます。似ているCSS としてfilterプロパティが挙げられますが、こちらは指定した要素自身にエフェクトをつける場合に用います。backdrop-filterプロパティの対応状況についてですが、Can I Useによると主要ブラウザの中でFirefoxのみサポートがされていません。
Firefoxの設定を変更することでbackdrop-filterプロパティを有効にすることができるようですが、一般ユーザーはそのような設定はしないでしょう。
そのため、Firefoxも対応ブラウザに含まれる場合は、backdrop-filterプロパティがあたっていない状態でも適切に情報がユーザーに伝わるデザインであるかを確認しましょう。
例えば、モーダルの例では、オーバーレイ自体に透明度のある黒を使っているのでぼかしの効果がない場合もデザイン崩れせず、問題なく情報を見ることができます。「ブラー効果をつける」のチェックを外してお確かめください！
参考：
https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter