Backdrop filter blur

Design help Custom code
1

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

2

Hi

Can You elaborate your issue?

3

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

4

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

5

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

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

7

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

image
image1361×542 133 KB

8

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

image
image1728×557 116 KB

image
image1233×304 106 KB

9

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

10

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.

11

Everything worked out! Thank you! :slightly_smiling_face:

12

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

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

Good call, not sure why I included spaces there.

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

14

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

Screen Shot 2021-10-21 at 1.29.34 PM
Screen Shot 2021-10-21 at 1.29.34 PM1336×1272 78.4 KB

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

15

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