I recently came across Webflows frosted glass navigation and thought I’d take a crack at trying to recreate it myself for a new project.
So far, I’ve managed to pull in the filters. However, for some reason they seem to be affecting the nested items rather than just the navigations background.
Please would someone be able to point out where I’m going wrong with what I’ve created so far.
Me again. The blur filter blurs the element and its children, whereas the backdrop-filter css rule blur’s the content behind the element. This CSS rule isn’t native to Webflow so you have to put it in yourself, and also be aware it doesn’t have compatibility across all browsers and devices, hopefully one day. The effect likely won’t show on Mozilla Firefox, although backdrop-filter can be enabled, but it needs to be enabled in the users browser, and its default value is false.