What you will learn?

  • Learn to create your very first custom cursor
  • Learn to create a custom card
  • Learn to create a simple scale hover effect

Quick Intro

Yesterday I was surfing through dribble feeds and there I saw a UI design that used custom cursor which was looking really cool.

So I thought why not re-create it. When I started to research for this project, I thought creating custom cursor is not easy but after spending 1hr of digging the internet I was able to create it.

So I will break down every hard part for you which I faced so you don’t have to waste time on stupid things.

When you should use the Custom Cursor?

Before we get started with the technical part I want to point out that don’t over-use custom cursor thing. And it does not fit with every type of website.

You can use it with your portfolio website projects or any kind of artistic website.

And you should not use it on professional websites like- E-commerce sites, local business sites, etc.

So let’s start with a little project without wasting much time. This project will help you get started with creating custom cursors.

Here’s what we are making:

custom cursor using css

Cursors work only on Desktops and Laptops. So if the live demo is not working on your phone that could be the possible reason😂😂😂

Explanation:

HTML

  <div class="cursor"></div>
    <div class="card">
    <div class="image-holder">
        <img src="./images/Cat.jpg">
    </div>
    </div>

It’s simple HTML. I have created a div with class ” cursor “ that will be our actual cursor which we will design later with CSS.

Basic Styling


/* General Styling */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none;
}
body{
    background-color: rgb(24, 23, 23);
    color: wheat;
    font-family: 'Poppins';
    overflow: hidden;
    font-size: 20px;
    
}

But before we start to add any styling we need to remove the default cursor. So to do that we use cursor: none;” property. This removes the default cursor from the entire website.

And rest of the code is a general CSS rule-set for the entire page. It just removes default margin-padding and sets background-color, font-size, etc.

Card Styling

.image-holder img{
    border-radius: 20px;
    object-fit: cover;
    opacity: 0.8; 
    width: 300px;
    height: 400px;
    box-shadow: 3px 11px 27px 0px rgba(0,0,0,0.75);
    transition: all .5s ease-in-out;
}
.card {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10%;
     }

.card img:hover {
     transform: scale(1.1); 
}

.card class centers the entire card in the center of the screen using flexbox.

.image-holder is the class where all transition and box-shadow is being applied. And .card img:hover apply scale effect using transform: scale(1.1);

Cursor Styling


/* Cursor Styling */
.cursor{
    position: absolute;
    width: 30px;
    height: 30px;
    border:2px solid red;
    border-radius: 50%; 
    pointer-events: auto;
    z-index: 1;
    backdrop-filter: grayscale();
}
.cursor-scale{
   transform: scale(1.5); 
}

.cursor class is very important for this entire example. In this class, we add the actual styling of the cursor which you want to display on the screen.

In this .cursor class we just added width, height, radius, and border styling. But there are two property which is important here- pointer-events: none; and backdrop-filter: grayscale();

So what do they do?

The pointer-events CSS property sets under what circumstances a particular graphic element can become the target of pointer events. You can read more about pointer-events at Mdn docs

The backdrop-filter CSS property lets you apply certain effects such as blurring or color shifting to the area behind an element. You can read more about backdrop-filter at Mdn docs

So backdrop-filter: grayscale(); makes image grey if that particular element with this property comes above it (in this case it is .cursor ).

Javascript Code Explanation

Grabing classes

// Grabing classes
let cursor = document.querySelector(".cursor");
let image_holder = document.querySelector(".image-holder");

// Adding Event listner to entire screen(window) so that
// cursor can move on mousemove
window.addEventListener("mousemove", animation);

This block of code just grabs ".cursor" and ".image-holder" and stores in a variable for later use.

And window.addEventListener("mousemove", animation); adds event listener on mousemove and calls function named animation which we will create in the latter part of the post.

Red Cursor Movement

// Function that make's red cursor move along
function animation (e){
  cursor.style.top = e.pageY +20 + "px";
  cursor.style.left = e.pageX + 35 + "px";
};

pageY is a mouse event property that returns the Y (vertical) coordinate in pixels of the event relative to the whole document(in this case whole page).

pageX does the same thing as pageY but returns the X(horizontal) coordinates.

And the above code takes up the coordinates from pageX and pageY and sets the top and left position for the cursor. And then we call this function on mousemove.

Function to Add Scaling&Color Effect

// Function to scale cursor
function cursor_scale(){
  cursor.style.transform = "scale(3)";
  cursor.style.borderColor = "black";
  cursor.style.transition = " all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)";
  cursor.style.transitionProperty = "background,transform";
};

The above code adds styling to the cursor that will be applied when the cursor will be over an image(card).

cursor.style.transitionProperty = "background,transform"; This transitionProperty applies transition to only that objects which you will mention.

If you will look closely at the scale effect you will see that scaling happens with indefinite speed and curve. That happens because of the cubic-bezier curve. It’s a curve that has four-position- x, y, x2, y2. It just defines the path a certain element has to follow and it is very useful in case you are creating SVG animations.

If you are wondering how I got that exact values, you can use this awesome tool that helps you to generate cubic-bezier curves code visually: visit

Setting Back Normal Properties

// Function to Descale cursor
function cursor_descale(){
    cursor.style.transform = "scale(1)";
    cursor.style.borderColor = "red";
    cursor.style.transition = " all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)";
    cursor.style.transitionProperty = "background,transform";
  };
  

This block of code just reverses the whole process when you are not hovering over image.

Other Complex Examples of Custom Cursor

1.Interactive Custom Cursor

See the Pen Interactive Custom Cursor by hb nguyen (@hbthen3rd) on CodePen.

2.Creating Custom Cursors

See the Pen Creating Custom Cursors by designcourse (@designcourse) on CodePen.

3.Custom cursor with gsap

See the Pen Custom cursor with gsap by Solène Ramis (@soleneramis) on CodePen.

4.Fluent hovering effects with custom pointer

See the Pen Fluent hovering effects with custom pointer by Eric Cornelissen (@ericornelissen) on CodePen.

5.Custom Cursor/Pointer and dark mode

See the Pen Custom Cursor/Pointer and dark mode by Diogo Gomes (@diogo_ml_gomes) on CodePen.

Good tutorials on Custom Cursor

Video Credit:
Codegrid
Video Credit: DesignCourse
Video Credit: Dev Ed
Video Credit: Codegrid

Thanks for reading my post on how to create a custom cursor with CSS. If you find out this article helpful share it with your friends. You can also check out other posts on- 4 Best Ways to Host website for Free or Learn to create Custom Scrollbar or 3D Tilt-Shift Effect.