Backdrop Filter not working

Design help Animations & Interactions
1

Hey,

i started learning webflow few weeks ago. Now i wanted to try out backdrop filters.

Preview

My Plan here was to make some parts of the circle inverted and blurry while scrolling (in scroll the circle rotates).

As i said, this is only for testing these filters out. But even though the filter works perfectly in de Webflow designer, it does not in the published site, neither in preview mode.

Alo if you have any advices on how to position the filter for my usecase, it would be very helpful (How to scale, which position mode, etc.)

I really dont know how to do it, so i would appreciate it if someone may help.

Thank you.

Till

2

Hey Till,

It looks like the backdrop filter layer is falling behind the image in preview mode - an odd quirk of the design I guess. Adding a z-index to the box to force it in front of the circle should sort that for you.

Hope that helps!

3

Another potential reason might be the presence of a filter applied to a parent element of the one where you intend to apply the backdrop-filter.