Blur background with SVG?

Is it possible to blur the background partially without having to set the backgrund twice? So that it does not matter when the original background changes, it will always blur?

I found this codepen that uses a svg, but I was unable to reproduce in webflow:

Source is also a interesting read: Frosting Glass with CSS Filters | CSS-Tricks - CSS-Tricks

Also a screenshot to show what I’d like to accomplish, you can see that the nav-bar and the text-background should be blurred:

Also the next stept would be to get proper/sharp borders… :slight_smile:

Thanks for any help!

I did a bunch of research on this a while back and I think it’s not currently possible outside of Safari. You can enable dev mode in Chrome to get webkit backdrop to work, but it’s buggy and most people don’t have that enabled by default. SVG, if I remember correctly, doesn’t work either. I’m not 100% sure about that though.

1 Like

Thank you! Yes Backdrop, it should be default in any browser TODAY! :smiley:

P.S.: cutting and sharpening the blurred edges was the easiest part: put the blurred div in antoher div that is smaller and set overflow: hidden! :sunglasses: :+1:

1 Like