3

My goal is to have boxes with a blur-glass effect. To do this I use:

background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(7px);

Additionally on certain events I want to blur the whole page, except for one element (let's call it element-x). For the overlay I use:

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(2px);
  z-index: 5999;
}

I'm able to create the blur-glass effect. And I'm also able to make a blur-overlay.

But as soon as the element-x lies within the box (nested) with the blurred-glass effect. It gets blurred with the overlay.

When I remove backdrop-filter: blur(7px); from the box, it works.

I know it's a stacking order problem (z-index). But I can't get it to work, as expected. How can I solve this problem?

OK. I build a codepen for you to reproduce (use Google Chrome): https://codepen.io/54mu3l/pen/JjNdBwd

On the top you'll find the solution that is not working. On the bottom you'll find the expected behaviour (but without the glassed-blurred-box).

As you can see the top box has a blurred background. The bottom box hasn't: enter image description here

As soon as the overlay is activated (just click anywhere on the screen). The orange box on the top gets blurred (but shouldn't). The orange box at the bottom is not blurred: enter image description here

EDIT: useful links:

nulldevops
  • 396
  • 3
  • 15
  • TL;DR from the duplicate, backdrop-filter create a stacking context so the box can no more go above the overlay alone, either the whole container or not – Temani Afif Jul 03 '21 at 19:25
  • I'm aware that there are similar questions out there. And I'm aware that it has to do with the stacking order. But still I don't know how to solve this. What can I do to get the required result? – nulldevops Jul 03 '21 at 19:49
  • 1
    you cannot, your only way is to move the element outside the container where you apply the backdrop. If you cannot then there is no way – Temani Afif Jul 03 '21 at 19:58
  • Thank you for your answer! If this is not possible in CSS. Do you have a workaround? Because I can't place it outside of the container. If I place it outside of the container, then I need to position it absolute with JavaScript. This is OK as long as I can calculate the exact position. But since the elements above on the page are animated (variable height) it's no longer possible to calculate the position with JS. – nulldevops Jul 03 '21 at 20:29
  • 1
    consider a pseudo element where you apply the filter (I will get you a related question) – Temani Afif Jul 03 '21 at 20:30
  • 1
    https://stackoverflow.com/a/63954144/8620333 – Temani Afif Jul 03 '21 at 20:31
  • all else aside, this is an excellent question once it has been edited, keep it up samuels – Félix Adriyel Gagnon-Grenier Jul 06 '21 at 20:18

0 Answers0