Frosted Glass effect - blur not contained

Hi All!

I’ve been building a website and it’s my first time trying to achieve a frosted glass design and I’ve run into some issues - even when I have overflow set to off, the blur is not contained at all. I even cloned some projects from the showcase, but whenever I load them in my screen there is no blur at all. I’m pretty sure I’m not doing something wrong but I might be missing something?

Attached images of the cloned project, this is how it looks in my screen:

And this is how it looks in the preview of the project before cloning, and how it’s supposed to look:

Then - how it looks when I add a blur to my div in my own website:

Overflow is set to hidden
Just added a blur filter

Thanks for any help!! Steff


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Howdy @orangeeclipse and welcome to the community! :wave:

It looks like you may be using the standard filter, as opposed to the backdrop filter, but without taking a closer look it’s hard to say for sure:

image

Webflow has a good little lesson on getting this working on your project that you can read/watch here. If you’re still running into issues, feel free to reply with a read-only link and I’d be happy to take a closer peek :+1:

THANK YOU! I feel so silly now!!