I'm currently developing a React web application and adding a feature that involves creating a "blob" following the mouse cursor. To achieve this effect, I decided to blur the blob by layering another div on top of it and using backdrop-filter. However, I encountered an issue where the backdrop-filter was also blurring other elements when placing another div over the blob.
Here is the code snippet for the Blob component in ReactJS:
import { useEffect } from "react";
const Blob = () => {
useEffect(() => {
const myBlob = document.getElementById("blob");
if(myBlob) {
document.body.onpointermove = event => {
const {clientX, clientY} = event;
myBlob.animate({
left: `${clientX - 150}px`,
top: `${clientY - 100}px`
}, {duration: 3000, fill: "forwards"});
}
}
}, [])
return (
<div>
<div id="blob" className="blob"></div>
<div id="blur" className="blur"></div>
</div>
);
}
export default Blob;
Below is the code snippet for the main page in ReactJS:
import Blob from "../atoms/trinkets/Blob";
const Home = () => {
return (
<div className="return-container">
<Blob/>
<div className="block"></div>
</div>
)
}
export default Home;
And here is the CSS code applied to both components:
.blob {
background: linear-gradient(to right, aquamarine, mediumpurple);
height: 200px;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
animation: rotate360 20s infinite;
}
.blur {
height: 100%;
position: absolute;
width: 100%;
z-index: 2;
backdrop-filter: blur(75px);
}
@keyframes rotate360 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.block {
height: 500px;
width: 500px;
background-color: pink;
z-index: 5;
}
The problem lies in the #blur div, which is causing the backdrop-filter to affect everything else. Despite trying various solutions, I couldn't get the .block div to appear above all other elements even after inspecting with Dev Tools.