Streaming live at 10am (PST)

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);
}

https://caniuse.com/#search=backdrop-filter

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: