We have a simple CSS background animation below with a div in the foreground that has backdrop-filter applied.
* { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; }
body {
display: flex; justify-content: center; align-items: center;
background-color: #eee;
background-image:
linear-gradient( -135deg, #ddd 25%, transparent 25% ),
linear-gradient( 135deg, #ddd 25%, transparent 25% ),
linear-gradient( -45deg, #ddd 25%, transparent 25% ),
linear-gradient( 45deg, #ddd 25%, transparent 25% ),
linear-gradient( #27b 50%, #1a5 50% );
background-size: 2rem 2rem; background-position: 1rem 1rem, 0 0, 0 0, 1rem 1rem;
animation-name: down, grow;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes down {
100% {
background-position: -12rem -12rem, -8rem -8rem, -8rem -8rem, -12rem -12rem;
}
}
@keyframes grow {
100% { background-size: 4rem 4rem }
}
div {
border-radius: 2rem; width: 10rem; height: 10rem;
background-color: rgba( 0,0,0,0.25 ); backdrop-filter: blur( 1rem );
-webkit-backdrop-filter: blur( 1rem );
}<div></div>The limitations of backdrop filter: no Firefox support, breaks when CSS filters are applied, breaks when 3D CSS transforms are applied etc. have left the desire for a suitable workaround to be found.
How can I get a similar effect to what's in the snippet above without using the CSS backdrop-filter property?
|
Similar questions have been asked before:
Alternatives to backdrop-filter?,
backdrop-filter: blur effect without using backdrop?
etc. but those solutions that would work all involve making a copy of the areas to be blurred and clipping them with overflow: hidden or clip-path. None of those solutions have worked for this particular example.
We want to use something that will work with animations and 3D CSS transforms behind the blurred areas. This will likely involve some JavaScript.
Preferably without libraries and with a working snippet included in the answers.
