Trying to code my own website for the first time and encountering some difficulties. Currently following this helpful tutorial to achieve a spotlight effect that follows the mouse. Here's the link to the code. However, I'm aiming for a rainbow gradient effect across the entire homepage with the spotlight displaying colors as it moves, similar to the original website that the tutorial is based on. It seems like there may be issue with the blend modes when incorporating the gradient, causing them not to show up against the dark background.
My plan was to have different layers: the dark background, the "blob", the gradient, and then add a blur similar to the tutorial. The idea being that the colors would only display against a white blob beneath the gradient. At the moment, I've only managed to implement the white blob and dark background. Unsure if the issue lies with the blend modes or something else entirely.
Encountering compatibility issues with Safari as well. Chrome displays the smooth blob that tracks the mouse movement accurately, but on Safari the blob either doesn't appear or its tracking is off, sometimes restarting its position unexpectedly. Aware that browsers may require different implementations; however, looking for easier solutions to ensure both browsers can handle the site properly.
If there are alternative methods to achieve shifting colors for the blob while maintaining the linear gradient, any suggestions would be greatly appreciated!
Here is the html, css, and javascript code I currently have. Your assistance is much appreciated!
const blob = document.getElementById("blob");
window.onpointermove = event => {
const {
clientX,
clientY
} = event;
blob.animate({
left: `${clientX}px`,
top: `${clientY}px`
}, {
duration: 2500,
fill: "forwards"
});
};body {
background-color: #222020;
height: 100vh;
margin: 0;
overflow: hidden;
position: relative;
}
#gradient-color {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #ff0000 100%), linear-gradient(360deg, #0029ff 0%, #8fff00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%), radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
background-blend-mode: screen, color-dodge, overlay, difference, normal;
z-index: 1;
opacity: 0;
}
#blob {
height: 34vmax;
aspect-ratio: 1;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: white;
mix-blend-mode: difference;
opacity: 1;
z-index: 2;
}
#blur {
height: 100%;
width: 100%;
position: fixed;
z-index: 3;
backdrop-filter: blur(12vmax);
}<div id="gradient-color"></div>
<div id="blob"></div>
<div id="blur"></div>
<section class="showcase">
<nav class="navbar vertical-center line line-vertical"></nav>
</section>