JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glow Cursor</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS
.box {
width: 300px;
height: 300px;
border: 2px solid blue;
}
JavaScript
var box = document.querySelector('.box');
box.addEventListener('mousemove', function (e) {
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
box.style.background = `radial-gradient(circle at ${x}px ${y}px, rgba(138, 189, 61, 1) 0%, rgba(255, 255, 255, 1) 150px`;
});
box.addEventListener('mouseleave', function () {
box.style.background = null;
});