Backdrop-filter ignores blur value on stacked elements in forefront

Question

The smallest innermost circle in the snippet below has a backdrop-filter blur of 10rem that's not being applied. It looks like the span element is inheriting the same exact amount of blur from it's parent instead of taking the higher value that should be applied. Any idea why and/or have any known workarounds?

* {
  box-sizing: border-box;
  margin: 0; padding: 0;
}
html, body, section {
  height: 100%;
}
section, div, span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-image: 
    url(
      'https://media.giphy.com/media/MjHdjmbIFQuDHRkGbI/giphy.gif'
    );
  background-size: cover;
  background-position: center;
}
div, span {
  border-radius: 50%;
  width: 10rem; height: 10rem;
  background-color: rgba( 80%,100%,90%,0.1 );
  background-image: none;
  backdrop-filter: blur( 0.375rem );
  -webkit-backdrop-filter: blur( 0.375rem );  
}
span {
  width: 5rem; height: 5rem;
  backdrop-filter: blur( 10rem ); /* this gets ignored */
  -webkit-backdrop-filter: blur( 10rem ); /* 10rem blur isn't applied, why? */
}

<section> <div> <span></span> </div> </section>

10rem blur would blur the innermost circle significantly more than is being seen in this example. I'm viewing this in Chrome.

Overall goal here is to make the innermost circle more blurry than the div it's inside of. How do I accomplish this?

Answer 1

Don't nest the elements, keep them separate.

Here is another idea to achieve what you want

body{
  margin:0;
}

section {
  display: grid;
  height: 100vh;
  background-image: url('https://media.giphy.com/media/MjHdjmbIFQuDHRkGbI/giphy.gif');
  background-size: cover;
  background-position: center;
}

section * {
  border-radius: 50%;
  grid-area:1/1; /* make both overlap */
  margin:auto; /* and center them */
  width: 10rem;
  height: 10rem;
  background-color: rgba( 80%, 100%, 90%, 0.1);
  backdrop-filter: blur( 0.375rem);
  -webkit-backdrop-filter: blur( 0.375rem);
}
section div {
  /* make a hole in the div for the span */
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 2.5rem),#000 0);
}

section span {
  width: 5rem;
  height: 5rem;
  backdrop-filter: blur( 2rem);
  -webkit-backdrop-filter: blur( 2rem);
}

<section>
  <div>  </div>
  <span></span>
</section>