Backdrop-filter doesn't work unless I set opacity on color
So, I am trying to apply glassmorphism to a page, and I noticed that if I use
it won't work.
Now, if I set
it works!
Why is that? I don't find a reasonable explanation on the documentation
24 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
It is already working, but I am wondering why it won't work with opacity on the element instead than on the color
Don't recommend !important, generally if you need to use it there's a problem with the layout of CSS
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Interesting. It is if the opacity is cancelling out the blur. Even if you add opacity to the background-filter it prevents the blur from working...
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Yep, or you're working with libraries or wordpress plugins (in which case it is the only way to workaround)
Sorry, but I think I wasn't clear, Hassaan. I am trying to understand why it happens that way. I have already figured how to do it
Can't just use CSS specificity?
No, because some plugins already use !important. So not even inline css outweights it
Ouh I see
I have a feeling that the same happens with wordpress
bootstrap*
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
CSS specificity is a better way to control styles, assuming you have control over all of the styles
In wonder if it has something to do with the stacking context
Back on topic I noticed https://codepen.io/jkantner/pen/QWZrMeB doesn't work on Firefox but does on Chrome and I don't know why but it doesn't use opacity
Hmmm interresting
I think that what is happening is that, as the opacity is being applied to everything in the element, that includes the filter so the effect of the filter is effectively being reduced along with all it's other properties.
woooow you nailed it! @Kevin give this person a trophy 🙂
Nope, I think the stacking context is the key. I'll do a test trying to send the text back
If you combine that with having a background color, you are applying so much opacity to be able to see the background you are effectively canceling out the blur.
I tested it, it's not because of stacking context =/
😦
I think that my latest theory is closer to what is happening.
https://drafts.csswg.org/css-color/#transparency
Yeah! You are absolutely right.
If it was some problem between properties, setting opacity 1 would break the blur anyway, but it doesnt.
I tried opacity .9999 and there still is blur.
on opacity .5 the blur disappears
Chris, here is a medal for you 🏅
@zed_dash and @Hassaan Shahzad thank you for helping! 😄
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View