Cursor-Tracking Glow Card

<div class="gl"><h3>Glow Card</h3><p>Hover to follow the cursor with a soft radial glow that tracks your pointer.</p></div>

body{background:#0d1426}
.gl{position:relative;width:300px;border-radius:18px;padding:28px;background:#121a2e;border:1px solid #233052;color:#fff;font-family:system-ui,sans-serif;overflow:hidden;cursor:pointer}
.gl::before{content:'';position:absolute;width:300px;height:300px;background:radial-gradient(circle,rgba(255,71,126,.35),transparent 60%);left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;pointer-events:none}
.gl:hover::before{opacity:1}
.gl h3{margin:0 0 8px;position:relative}.gl p{margin:0;color:#9fb0d0;line-height:1.6;font-size:14px;position:relative}

var c=document.querySelector('.gl');
c.addEventListener('mousemove',function(e){var r=c.getBoundingClientRect();c.style.setProperty('--x',(e.clientX-r.left)+'px');c.style.setProperty('--y',(e.clientY-r.top)+'px')});