In this tutorial, you will learn how to add a circular background light to the cursor with CSS and JavaScript. Watch the video below for a detailed tutorial.
<body>
<div id="cursor-bg"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, sunt tenetur? Quisquam numquam deserunt, optio nulla laborum dolorem odio debitis! Itaque explicabo quidem cupiditate non velit consequatur rerum sit quod.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, sunt tenetur? Quisquam numquam deserunt, optio nulla laborum dolorem odio debitis! Itaque explicabo quidem cupiditate non velit consequatur rerum sit quod.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, sunt tenetur? Quisquam numquam deserunt, optio nulla laborum dolorem odio debitis! Itaque explicabo quidem cupiditate non velit consequatur rerum sit quod.</p>
</div>
<script>
const bg = document.getElementById('cursor-bg');
document.addEventListener('pointermove', (e) => {
bg.style.display = 'block';
bg.animate ({
top: e.pageY + 'px',
left: e.pageX + 'px'
}, {
duration: 1000,
fill: 'forwards'
})
})
</script>
</body>body {
background-color: #2E3537;
margin: 0;
min-height: 100vh;
}
.content {
padding: 4em;
}
.content p {
font-family: sans-serif;
font-size: 4em;
color: white;
}
#cursor-bg {
display: none;
position: absolute;
width: 100px;
height: 100px;
background: #45B0DF;
border-radius: 50%;
filter: blur(50px);
}