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?
Although, again, the blur does not work in safari, in others everything is fine
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!
Just for the future, get rid of the spaces between “blur” & “(30px);”
.navbar-class {
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
Good call, not sure why I included spaces there.
I’ve updated my post so the solution is accurate, thanks
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.