backdrop-filter not working for nested elements in Chrome

by

Place the backdrop filter on css pseudo element. This allows nested backdrop filters. Also you can use z-index: -1; to position your backdrop behind your elemets

div {
  height: 100px;
  width: 100px;
}
.wrapper {
  position: absolute;
}
.outer, .inner {
  position: relative;
}
.outer::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.outer {
  background: rgba(255, 0, 0, .5);
}
.inner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  
}
.inner {
  background: rgba(0, 0, 255, .5);
  top: 50px;
  left: 50px;
}
main {
  position: relative;
}

<main>
  <div class="wrapper">
    <div class="outer">
      <div class="inner"></div>
    </div>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
</main>

And here is codepen

More Related Contents:

  1. How can I make a CSS glass/blur effect work for an overlay?
  2. How to calculate required hue-rotate to generate specific colour?
  3. Where is this undefined coming from? [closed]
  4. Something weird with css
  5. What’s the difference between an id and a class?
  6. Does :before not work on img elements?
  7. CSS3 100vh not constant in mobile browser
  8. Twitter Bootstrap 3 Sticky Footer
  9. Removing whitespace between HTML elements when using line breaks
  10. CSS set background-image by data-image attr
  11. Stretch text to fit width of div
  12. Is it possible to use text-overflow:ellipsis on multiline text?
  13. How to stop text from taking up more than 1 line?
  14. What’s the difference between flex-start and baseline?
  15. Scroll particular DIV contents with browser’s main scrollbar
  16. Inline tags vs. inline css properties
  17. CSS horizontal centering of a fixed div?
  18. Giving a border to an HTML table row,
  19. How to prevent text in a table cell from wrapping
  20. Font Awesome icons are not working, I have included all required files [closed]
  21. Half circle with CSS (border, outline only)
  22. Flexbox resize and scrollable overflow [duplicate]
  23. How do I make Firefox auto-refresh on file change?
  24. Tooltip with HTML content without JavaScript
  25. Change color of one character in a text box HTML/CSS [duplicate]
  26. Second line in li starts under the bullet after CSS-reset
  27. Blank iFrame in IE
  28. How position absolute and fixed block elements get their dimension?
  29. Ring-shaped process spinner with fading gradient effect around the ring
  30. text-decoration not working for visited state link

Leave a Comment