CSSで擦りガラス越しに見ているようなエフェクトをかけたい際、backdrop-filterを使うといい感じに実装できます。
DEMO
ソースコード(抜粋)
CSS
.backdrop-filter { backdrop-filter: blur(4px); }
しかし、現状ではSafariで使用するにはベンダープレフィックスが必要です。(iOS 16.6で確認)
DEMO
ソースコード(抜粋)
CSS
.backdrop-filter { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
先日、backdrop-filterを使ったNext.jsのプロジェクトを見返したところ、iPhoneで観覧した際に効いていないことに気づき、ベンダープレフィックスが必要なことに気づきました。
以前は、iOSで効いていた気がするのですが、Autoprefixerが効いていたのかもしれません。