Backdrop filter blur

Hello, the code is “backdrop-filter: blur (30px)”; not working in safari, why?


Hi

Can You elaborate your issue?

Hello, watch the video: https://www.loom.com/share/88f2396b66ad4cb9b3428d601c0185dc

The problem is that blur doesn’t work in Safari browser

Looks like you’re missing the -webkit- prefix here, so your code should look more like what I have below:

.navbar-class {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

Webflow has a built-in “Blur” filter that doesn’t require code. Couldn’t you use that?

for some reason, the last line knocks the code and the blur stops working

I need him to blur what’s behind, not himself


1 Like

Although, again, the blur does not work in safari, in others everything is fine :thinking:

Please include the read-only link for your project so we can make sure it’s implemented properly.

Edit: I’ve thrown together a quick example using the code I provided above that you can see live here or you can view the read-only link here. Keep in mind for this to work your “blurred” element needs to have a somewhat transparent background color, otherwise the effect won’t show up.

Everything worked out! Thank you! :slightly_smiling_face:

Just for the future, get rid of the spaces between “blur” & “(30px);”

.navbar-class {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}
1 Like

Good call, not sure why I included spaces there.

I’ve updated my post so the solution is accurate, thanks :v:

Hi there, does anyone know how to get the same type of effect as this website?

Specifically the way the background blur is on the teal green element with 92%.
It seems as only the area over the image is slightly blurred. Different to the examples in this discussion.

Cheers

Did you know this effect now is in Wefblow (beta)?
So in the near future no more work-arounds needed for this.