Backdrop filter blur not working on live site

Hey!

I need some help. I added the backdrop blur filter in the webflow editor (desired look): https://i.gyazo.com/ba943ff23dab75d910df830ebe413610.png

however, on the live site it looks like this: https://i.gyazo.com/16a04b844822cad7c889845a24b0fd89.png

It doesn’t work and even states that it’s an invalid property value: https://i.gyazo.com/3f0e7ae9a239610de1f94160f0fde6d9.png

is there a work around to this?? I’m confused because most browsers support this now.


Here is my site Read-Only: [LINK][1]

Any time you’re looking for design help, always provide the read-only link so that us Webflowers can take a look under the hood!

https://preview.webflow.com/preview/finfy?utm_medium=preview_link&utm_source=designer&utm_content=finfy&preview=0d47dc2f23d46d8153749129d0daac0a&workflow=preview

I fixed it by changing the backdrop blur from the individual cards to the containers themselves. I believe it’s because your styling was nested too deep within children’s elements. By setting the blur to the direct descendants of the 'feature2-pricing-content, it seems to be applying to the entire container now.

You’re awesome! Thank you tons

actually this works in the pricing section, but not the “feature3” section. I just want the blur behind the individual cards and not the entire container, how would I go about doing that?

I’ve been doing some digging trying to figure this out, but haven’t found any solution as of yet. I tried using a pseudoelement to append a blur to the child element, but the same result is occurring. In the designer, it looks as if the effect is being applied, but on preview, the styling doesn’t apply.

Designer:

Preview:

Interestingly though, if I set the pseudo element z-index on top of the child container, it seem that the blur gets applied to the text elements within the child, even though it still fails to blur you can see a glow that I would interpret as blur.

Designer:

Preview:

The following leads me to believe it’s probably a bug or it’s not being supported for whatever reason… Backdrop-filter: blur is in Beta so that might be the reason why it’s not behaving as expected.