How To Make GRAINY GRADIENTS In CSS ( + Interactive Bonus)

[@_Swink]

I've been trying to get this effect in pure CSS for a while. SVG.. of course! thanks!

[@samosborne]

awesome :D

[@sairohit5510]

my useEffect doesnt seem to work for some reason, I cant get the style property to show up in attributes

[@blissorordeal]

Hi, I encountered the same problem and came up with this solution. Please note that I renamed the CSS variable and used TypeScript!
import { useRef, useEffect } from "react";
export default function Gradient() {
const gradientRef = useRef(null);
useEffect(() => {
const handleMouseMove = (event: MouseEvent) => {
if (!gradientRef.current) {
return;
}
const { clientWidth, clientHeight } = gradientRef.current;
const mouseX = (event.clientX / clientWidth) * 100;
const mouseY = (event.clientY / clientHeight) * 100;
gradientRef.current.style.setProperty("--mouseX", `${mouseX}%`);
gradientRef.current.style.setProperty("--mouseY", `${mouseY}%`);
};
window.addEventListener("mousemove", handleMouseMove);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
};
}, []);
return ;
}

[@charith-q8m]

Is there any way to lower the saturation of the grain in svg.