How to Build Animated Cursor Neon using HTML, CSS and JavaScript?

Last Updated : 22 Jul, 2024

The neon cursor moves with your mouse, creating a cool visual effect. You can change the neon color to match your website. You can also adjust how bright and wide the neon glow is to fit your style. You can transform your cursor into a bright neon trail. You can choose different colors, adjust the glow, and set the trail length. It's perfect for dark backgrounds and won't slow down your website.

Prerequisite

Approach

To create an animated neon cursor, begin by designing your HTML with a 'div' for the cursor and another for the content. In the CSS, give the cursor a neon effect using 'border', 'box-shadow', and 'animation', and add a 'pulse' keyframe to make it glow. Finally, use JavaScript to follow the mouse with the 'mousemove' event, adjusting the cursor's position based on where the mouse is to make it follow smoothly.

Example: This example illustrates the creation of an Animated Cursor Neon using HTML, CSS, & JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Neon Cursor</title>
    <link href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
          rel="stylesheet">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="container">
        <div id="title">
            <h1>NEON<br />CURSOR</h1>
        </div>
    </div>
    <div id="neon-cursor"></div>
    <script src="script.js"></script>
</body>

</html>

CSS

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    font-family: 'Montserrat', sans-serif;
}

#container {
    text-align: center;
}

#title {
    color: #fff;
    font-size: 4em;
}

#neon-cursor {
    width: 20px;
    height: 20px;
    border: 2px solid #0ff;
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff, 0 0 40px #0ff;
    transition: transform 0.1s, box-shadow 0.1s;
    transform: translate(-50%, -50%);
}

JavaScript

document.addEventListener('mousemove', (e) => {
    const cursor = document.getElementById('neon-cursor');
    cursor.style.left = `${e.clientX}px`;
    cursor.style.top = `${e.clientY}px`;
});