Blur The Edges Of A Backdrop-filter Element With Css

Where the CSS property backdrop-filter is used there are always sharp edges along the elements border. However to blur the edges themselves along with all content underneath is th

Solution 1:

The only work-around I found was faking backdrop-filter blur by duplicating all elements to be affected then creating a "window" overlapping the background positioned to it's exact location with a regular filter: blur( n ) applied.

document.querySelector( 'style' ).innerHTML += `
  .earth_orbit, .moon {
    width: 15rem;
    margin-left: 100%;
    background-color: #222;;
  }
  .earth_orbit::before {
    width: 5rem;
    height: 5rem;
    background-color: #08f;
  }
  .moon::before {
    display: none;
  }
  .moon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #ddd;
  }
  .sun_orbit, .earth_orbit {
    background-color: transparent;
  }
  footer {
    right: 5%;
    width: 20rem;
    height: 20rem;
    background-color: transparent;
  }
  .rotate {
    animation-name: rotate; animation-duration: 4s;
    animation-timing-function: linear; animation-iteration-count: infinite;
  }    
`;

*, * ::before, * ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body, main {
  overflow: hidden;
  height: 100%;
  background-color: #111;
  color: #eee;
}
html {
  font-family: Arial;
  font-size: 1.5vmin;
}
main, div, footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
div, div::before, footer {
  position: absolute;
  z-index: auto;
  width: 10rem;
  height: 10rem;
  background-color: #f90;
  border-radius: 5rem;
  content: '';
}
div {
  width: 40rem; height: 1rem;
  background-color: #444;
}

<style>footer.sun_orbit { top: 9.5rem; left: -13.25vmax; }
  section { width: 70%; height: 70%; }
  p { 
    position: relative; z-index: 10; font-size: 2rem; left: 30vh;
  }
  footer {
    overflow: hidden; background-color: #111;
    z-index: 10; filter: blur( 1rem ); left: 54.5vmax;
  }  
  @keyframes rotate {
    0% { transform: rotate( 0deg ); } 
    100% { transform: rotate( 360deg ); }
  } 
  .offset { animation-duration: 1s; }  
</style><main><divclass='sun_orbit rotate'><divclass='earth_orbit rotate offset'><divclass='moon'></div></div></div><footer><section><divclass='sun_orbit rotate'><divclass='earth_orbit rotate offset'><divclass='moon'></div></div></div></section></footer><p>backdrop overlay<br>with faded edges</p></main>

Added benefit is this whole effect now works in Firefox when at first it didn't. Also: This could be made responsive if so desired.