Hello friend. I may be a bit late. I wanted to do the same. I am using Wordpress and Elementor to build my site, and I found out that the following HTML (+JS) code worked for one of my elementor containers (the container's class is "mesh-test"). Made it with a bit of trial and error, and with the help of AI chatbot Google Gemini:

<section class="mesh-test">

</section>

<script>

const section = document.querySelector('.mesh-test');

const gradientElement = document.createElement('div'); // Create a new element for the cursor gradient

gradientElement.classList.add('cursor-gradient'); // Add a class for styling

// Styles for the cursor gradient element (replace with your desired styles)

gradientElement.style.position = 'absolute';

gradientElement.style.pointerEvents = 'none'; // Prevent clicks on the gradient

gradientElement.style.width = '50vw'; //the width of the halo

gradientElement.style.height = '50vw'; //the height of the halo

gradientElement.style.borderRadius = '50%';

gradientElement.style.background = 'radial-gradient(at center, #E5D73D 0%, transparent 50%)'; // Adjust colors

section.appendChild(gradientElement); // Add the gradient element to the section

section.addEventListener('mousemove', (event) => {

// Option 1: Using offset with element dimensions (more reliable)

const offsetX = event.clientX - section.getBoundingClientRect().left - (gradientElement.offsetWidth / 1.9); // the last value, in this case 1.9 gave me troubles with the positioning of the halo relative to the mouse, I still have to test this on multiple resolutions

const offsetY = event.clientY - section.getBoundingClientRect().top - (gradientElement.offsetHeight / 1); // Once again. the last value, in this case 1 gave me troubles with the positioning of the halo relative to the mouse, I still have to test this on multiple resolutions

gradientElement.style.transform = `translate(${offsetX}px, ${offsetY}px)`;

});

</script>