Streaming live at 10am (PST)

Using CSS backdrop filter with nested elements

Hello ! I love the new feature backdrop filters for making those frozen glass effects that looks so cool.
However, does anyone know why when you use the backdrop filter property on an element, any of its children cannot have it anymore ?

For instance, I use the blur effect on a sticky header, which is awesome. And I also have a dropdown in the header. I’d like the dropdown having the same backdrop filter than the header. But it just doesn’t work…

Is that normal ? Thanks for your reply


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

The normality of CSS properties working is a relative thing…

For instance, bd filters on elements nested inside of an element with bd filter works… in Safari.

I think there are workarounds for Chrome.

With a different DOM you may achieve it for Chrome. This seems to be a good place to start html - backdrop-filter not working for nested elements in Chrome - Stack Overflow