33 replies

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

background-color: #000000;
opacity: 0.5;
backdrop-filter: blur(4px)

background-color: #000000;
opacity: 0.5;
backdrop-filter: blur(4px)

background-color: #000000;
opacity: 0.5;
backdrop-filter: blur(4px)

background-color: #000000;
opacity: 0.5;
backdrop-filter: blur(4px)

it won't work.

Now, if I set

background-color: #00000088;
backdrop-filter: blur(4px)

background-color: #00000088;
backdrop-filter: blur(4px)

background-color: #00000088;
backdrop-filter: blur(4px)

background-color: #00000088;
backdrop-filter: blur(4px)

it works!

Why is that? I don't find a reasonable explanation on the documentation