Blur filter styling not working on Safari + mobile

I’ve been having trouble getting an element with blur: 200 px to show in Safari (shows on Chrome on desktop but not Chrome or mobile. Doesn’t show on Safari on any device).

The element with the blur property is a div container with child div that has a gradient background.

Read-only: Webflow - Matt Zabierek Design

I’ve spent a lot of time researching this bug with blur filters with Safari/mobile devices but haven’t found a solution or workaround that works for me and some of them go beyond my coding knowledge. I’ve experimented with changing all sorts of variables in Webflow and I can’t get anything to work reliably.

Does anyone have a workaround? Would be MUCH appreciated!

Hi @mzabierek backdrop-filter work in Safari with -webkit prefix.

-webkit-backdrop-filter: blur(200px)

Hi @Stan thank you for solution! I added that CSS line in Webflow and the blur isn’t getting applied to the target element. Anything I’m doing wrong here?