document.querySelector( 'style' ).innerHTML += `
div {
width: 40rem;
height: 1rem;
background-color: #444;
}
.earth_orbit, .moon {
width: 15rem;
margin-left: 100%;
background-color: #222;;
}
.earth_orbit::before {
width: 5rem;
height: 5rem;
background-color: #08f;
}
.moon {
width: 2.5rem;
height: 2.5rem;
background-color: #ddd;
}
section {
right: 5%;
width: 37.5%;
height: 50%;
font-size: 5rem;
font-weight: bold;
text-align: center;
backdrop-filter: blur( 2rem );
-webkit-backdrop-filter: blur( 2rem );
/* filter: blur( 1rem ); */ /* Only blur inside element, ignoring the paremter */
}
`;*, * ::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, section {
display: flex;
justify-content: center;
align-items: center;
}
div, div::before, section {
position: absolute;
z-index: auto;
width: 10rem;
height: 10rem;
background-color: #f90;
border-radius: 5rem;
content: '';
}
.moon::before {
display: none;
}<style>
.sun_orbit, .earth_orbit, section {
background-color: transparent;
}
span {
color: #ccc;
font-size: 4rem;
}
.rotate {
animation-name: rotate;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rotate {
0% { transform: rotate( 0deg ); }
100% { transform: rotate( 360deg ); }
}
.offset {
animation-duration: 1s;
}
</style>
<main>
<div class='sun_orbit rotate'>
<div class='earth_orbit rotate offset'>
<div class='moon'></div>
</div>
</div>
<section>
<p>blurred overlay<br><span>( backdrop-filter )</span></p>
</section>
</main>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 the desired result. setting filter: blur( *value* ) on the target element doesn't seem to do the trick in any browser i've tested.
There's this question asked over a year ago with no answer and perhaps not as clear an example of what is trying to be accomplished here. Every time the 'planets' go behind the blurred div you can see a clear edge of where the div begins and ends - like crisp glass. I'd like to find a way to maintain all the effects here but blur that edge or border along the 'glass' or backdropped overlay.
