// Select all the gradient-div elements const gradientDivs = document.querySelectorAll('.gradient-div'); // Loop through each div and add event listeners gradientDivs.forEach(div => { div.addEventListener('mousemove', function(event) { // Get the size and position of the div const { width, height, top, left } = div.getBoundingClientRect(); // Calculate mouse position relative to the div const x = event.clientX - left; const y = event.clientY - top; // Calculate the gradient's focal point based on mouse position const xPercent = (x / width) * 100; const yPercent = (y / height) * 100; // Set a dynamic radial gradient based on the mouse position div.style.background = `radial-gradient(circle at ${xPercent}% ${yPercent}%,#C9E5FC, #FFFFFF)`; }); // Reset the gradient when the mouse leaves the div div.addEventListener('mouseleave', function() { div.style.background = `linear-gradient(135deg, #FFFFFF00 0%, #FFFFFF00 100%)`; }); });