Backdrop filter blur not working on live site


I need some help. I added the backdrop blur filter in the webflow editor (desired look):

however, on the live site it looks like this:

It doesn’t work and even states that it’s an invalid property value:

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!

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.



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.



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.

Hi! I’ve been struggling with a similar bug and I was able to replicate it. Apparently, this happens when you add any sort of Animation to the parent div of the div with a backdrop filter. Try removing the parent div(s) animations and it should work fine :slight_smile:

1 Like

Hi I had same issue and it helped removing animation; but I need that appearing animation for div parent… so did you find any other solution by any chance?

1 Like

Another potential reason might be the presence of a filter applied to a parent element of the one where you intend to apply the backdrop-filter.

1 Like

OMG, U saved my life man :handshake: