How to create custom cursor using CSS ?

Last Updated : 18 Apr, 2025

A custom cursor enhances the readability of the document and grabs the user’s attention to a specific part of the webpage. Today we are going to learn how to create a custom cursor for a webpage using HTML, CSS, and JavaScript.

Approach:

Hide the default cursor.
Define the classes that contain all the animations.
Add and remove these classes dynamically when the mouse button is pressed or when the mouse pointer is moved.

Example: This example shows the use of the above-explained approach.

<!DOCTYPE html>
<html>
    <head>
        <style>
        :root {
    --color: 255, 71, 84;
    --cursor-size: 30px;
}

* {
    cursor: none;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    overflow: hidden;

    background: #121212;
}

.custom-cursor {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;

    width: var(--cursor-size);
    height: var(--cursor-size);

    border: calc(var(--cursor-size)
                /30) solid #fff;
    border-radius: 50%;

    animation: cursor 800ms infinite 
            alternate ease-in-out;
      pointer-events: none;
}

.custom-cursor::before {
    content: "";
    display: block;
    width: calc(var(--cursor-size) / 2);
    height: calc(var(--cursor-size) / 2);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border: calc(var(--cursor-size) / 6) 
            solid rgba(var(--color), 0.5);

    border-radius: 50%;

    animation: cursor-before 800ms infinite 
            alternate ease-in-out;
}

.custom-cursor.click {
    animation: cursor-click 800ms 
        normal ease-in-out;
}

@keyframes cursor {
    from {
        transform: scale(1);
        border-color: #fff;
    }

    to {
        transform: scale(1.5);
        border-color: rgb(var(--color));
    }
}

@keyframes cursor-before {
    from {
        transform: translate(-50%, -50%) scale(1);
        border-color: rgba(var(--color), 0.5);
    }

    to {
        transform: translate(-50%, -50%) scale(1.5);
        border-color: rgba(var(--color), 0.75);
    }
}

@keyframes cursor-click {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(2.5);
        border-color: rgb(var(--color));
    }
}
</style>
</head>
<body>
    <div class="custom-cursor"></div>
    <script>
        
const cursor = document
    .querySelector(".custom-cursor");
window.addEventListener("mousedown", (event) => {
    if (!cursor.classList.contains("click")) {
        cursor.classList.add("click");

        setTimeout(() => {
            cursor.classList.remove("click");
        }, 800);
    }
});

window.addEventListener("mousemove", (event) => {
    let x = event.pageX - cursor.offsetWidth / 2,
        y = event.pageY - cursor.offsetHeight / 2;

    cursor.style.left = `${x}px`;
    cursor.style.top = `${y}px`;
});
    </script>
</body>
</html>