I Discovered 15 Animated Cursor Effects You Can Code in HTML & CSS

I Discovered 15 Animated Cursor Effects You Can Code in HTML & CSS

When I think of the mid-2010s Internet, I think about Tumblr. This magical online platform allowed (and still allows) you to build a personalized blog with unique elements like an HTML cursor. You could code it yourself or choose from a number of themes to tailor your blog to perfection. When I kicked off my blog, I wanted to get my aesthetic just right - which inxfcluded a heart-shaped animated cursor that alternated between colors of the rainbow.

While the days of bold (often blindingly colorful) Tumblr blogs may be behind us, animated cursors still have a place in the modern web. Whether employing custom shapes or adding animation upon click, these cursor effects give websites a visual charm, elevating the overall user experience. In the following sections, we'll explore cursor effects that can enhance your site's appeal, along with when to use animated cursors.

Table of Contents

• What is a cursor, anyway?
• Types of Cursor Effects
• HTML Cursor Codes
• How to Make an Animated Cursor
• Building an Animated Cursor

What is a cursor, anyway?

Cursors convey where a user's mouse is on a site and what actions they can take.

For example, when hovering over a table element, the cursor may change to a double-sided arrow, indicating that they can resize a row or column. When attempting to drag and drop an image, the cursor may change to an X, indicating that the action is prohibited.

Cursors can be animated to add interactivity to the user's browsing experience. These cursors may have unusual shapes, change upon clicks, or shift between colors. The site below has an animated cursor and multiple options people can use on their own sites.

Image Source

A fun cursor, like a lollipop, rose, or a cute cat can be a great choice for your personal blog. However, not every website needs a fun cursor. And if you do opt for that additional flair, it needs to match your brand. Below, we'll share examples of creative cursors in use.

Types of Cursor Effects

Custom cursors are popular in website design because they provide an opportunity to wow visitors who are expecting the default mouse pointer of their operating system. They're especially popular on creative websites, like agency and designer portfolios. Below are real websites with unique cursor effects.

1. Swirl Cursor Effect

Image Source

Advanced Team uses an advanced cursor effect that makes the user's scrolling path look like a disturbance of rainbow-colored water. This helped me keep track of where I was on the web page. Beyond that, the color adds unique splashes to this black-and-white website design.

What I like: The rainbow swirl cursor effect is a great contrast against the stark black background.

2. Flashlight Cursor Effect

Image Source

On Moooi's interactive site Paper Play, users scroll through various "immersive layers," which feature different products. On one layer that features the Dandelion Cranes Wallcovering, the cursor has a flashlight effect so the user can illuminate different elements on the page.

As a visitor, I was intrigued by this unique website design. I wanted to explore more, and the flashlight effect gave me greater visibility, pulling me in.

What I like: The flashlight cursor effect provides the user with control over their scrolling experience.

3. Distort Cursor Effect

Image Source

Utsobo is one of the coolest interactive websites. As I move my cursor over the page, the background distorts, becoming larger and darker. I'm actually invited to "draw on the page" by holding and dragging their cursor. This will temporarily freeze the cursor effect so it looks like brushstrokes on a painting.

What I like: The distorted cursor effect creates a unique interactive experience, making the user feel like they're already part of a collaborative design process.

4. Dot Cursor Effect

Image Source

Thinkingbox has a unique orange dot cursor with a shadow effect. This transforms into a white circle with an orange eye icon when hovering over video thumbnails on the page. It's a great way to communicate to visitors that these are videos, not images.

I like the use of a colored cursor over a more neutral-toned website. My eye follows where my mouse is naturally, making the navigation process smooth and intuitive.

What I like: This cursor effect subtly differentiates videos from other elements on the page.

5. Following Cursor Effect

Image Source

Tappezzeria Novecento has a unique cursor made up of two circles: One acts like the default mouse pointer, and the other looks like a shadow effect but starts to "follow" the cursor as it moves around the page. This effect makes the cursor more prominent so I can more easily locate where I am and move around the content-rich site.

What I like: The following cursor effect makes it easier for readers to navigate around this bold, content-heavy website.

6. Text Cursor Effect

Image Source

On CraieCraie's website, the cursor is a black dot that aligns perfectly with the logo. When hovering over a portfolio image, however, the black dot transforms into a transparent circle containing a word. In the screenshot above, you'll notice the cursor contains the word découvrir, which means "to discover" or "to uncover." This invites users to learn more about this specific project.

What I like: The text cursor effect helps inform the user what they can do next on the site.

7. Arrow Cursor Effect

Image Source

Mutt Agency uses cursor effects to improve the navigability of its unique portfolio website. As I scroll toward the top or bottom of the page, the cursor becomes an arrow to guide me on where to go next.

What I like: The arrow cursor effect helps guide the user's journey and encourages them to keep browsing.

8. Blur Cursor Effect

Image Source

Angello Torres combineshover animations and cursor effects to help visually communicate his graphic design style to users. Torres starts the digital portfolio off by describing his daring skills as chaotic. When I hover over the descriptive adjectives, the element becomes blurred, proving the artist's stance.

What I like: The blurred effect is a great way to allow users to visually feel the artist's message.

9. Fade-in Cursor Effect

Image Source

SIX SOCKS has one of the most unique cursor effects. When I first land on the site, the mouse pointer is surrounded by spinning text that says "click and drag." When I do so, elements based on the design of the cards appear.

What I like: The fade-in cursor effect is a unique and interactive way to provide users with a glimpse of what the product looks like.

10. Trailing Cursor Effect

Image Source

Lisa Says Gah uses a trailing cursor effect to mark the user's scrolling path. As I move around the page, a series of yellow circles will trail behind the cursor. It reminds me of pixie dust - sprinkling magic across the page. This is exactly on brand with Lisa Says Gah, which aims to connect the community with independent designers' uniquely crafted creations.

What I like: The trailing cursor effect not only improves navigation - it's also perfectly on brand.

HTML Cursor Codes

Here are some cursor effect ideas for inspiration to implement on your website. Below are ideas sourced from CodePen so you can easily copy and paste the code.

1. Shadow Cursor

See the Pen Animated cursor with Kinet by Georgy Marchuk (@gmrchk) on CodePen.

In the example above, the default mouse pointer has a blue shadow. It trails the pointer as it moves, then wobbles back into place when the pointer stills.

What I like: This colorful cursor helps me easily locate where I am on a black-and-white website.

Example use cases: The ball in the image is bouncy and fun. If your brand sells products that are creative or appeal to kids, this can be an engaging addition to your site. If dots are a part of your logo, a dot may also be a natural fit.

2. Animated Icon Cursor on Hover

See the Pen Animated cursor on :hover by Nharox (@Nharox) on CodePen.

Above, I see my OS's default mouse pointer - unless I'm hovering over one of the colorful blocks. Then, the cursor becomes animated, starting as an "X" icon and rotating until it's a white plus icon in a circle.

What I like: This cursor subtly differentiates clickable elements from the background of the web page.

Example use cases: The cursor clearly shows what users can click on and what they are not able to interact with. If your site offers learning material or how-to guides, a cursor like this can make the navigation experience intuitive.

3. Trailing Cursor

See the Pen React Animated Custom Cursor by Stephen Scaff (@StephenScaff) on CodePen.

This cursor combines the purposes of the two examples above. The red dot cursor is trailed by a semi-transparent dot when moving. However, it turns into a shadow when the cursor lands on a link.

Make sure that the color of your cursor contrasts with the background color of your site. If your site has a dark background, light colors will provide greater contrast and be easier to see. If your site has a light background, do the inverse.

What I like: This cursor makes the scrolling experience more engaging and differentiates links from text.

Example use cases: Clean and easy to understand, this cursor is a great fit for any site looking to level up engagement.

4. Expanding Cursor on Hover

See the Pen Animated Cursor + link hover effect by roeslein (@roesinn) on CodePen.

In the CodePen above, the cursor begins as a white circle. When hovering over one of the words, the white circle expands. The cursor becomes a hand pointer with a white shadow. Against the black background of the web page, the cursor looks like it's a spotlight.

Make sure your text has the right contrast for your desired effect. For example, in the CodePen above, there is white text on a white background that only appears when you hover the cursor over it. This can be used to surprise your visitors. However, this effect won't work for every site.

What I like: This cursor effect makes the text representing different navigation options the focal point on hover.

Example use cases: This effect may be overwhelming if you have a site with many links within a body paragraph. However, if you only want to highlight a few links in text and multiple throughout your navigation bar, this cursor may fit your project well.

If you want to know how to code this type of animated cursor from scratch, check out this video by CodeGrid:

5. Expanded Image Cursor on Hover

See the Pen Custom Cursor Effect by Ivan Grozdic (@ig_design) on CodePen.

In Ivan's Codepen, the cursor is a transparent circle that glides across the page focusing on the element that falls between its rounded borders. As the cursor approaches certain words, the animated cursor displays an image in lieu of the circle.

What I like: The cursor effect turning into a photo as it hovers over certain words catches my attention and forces me to engage with that specific content.

Example use cases: This effect will be most beneficial on sites that teach, such as dictionaries or training sites. The author can use the hover effect to display information, like pictures and explanations, to help deepen the user's understanding of certain words or sentences.

6. Blinking Cursor

See the Pen Cursor effect by Eric Gruby (@ericgruby) on CodePen.

In the code above, the creator uses a bright green triangle cursor that blinks as my mouse navigates the web page. If my mouse hits the navbar, the cursor disappears, and a bright green line highlights the section of the navbar that the mouse is hovering.

What I like: The transition from cursor to line on the navbar allows users to focus on what part of the web page they want to navigate to.

Pro tip: Consider changing the color of the navbar line as the user hovers over different sections to decrease their chances of confusing the sections they are navigating to.

How to Make an Animated Cursor

You have two options for making an animated cursor. You can use an editor, like IcoFX, to make an animated cursor for your operating system or code one from scratch and embed it on your website. The latter requires HTML, CSS, and JavaScript and is best for experienced developers.

For users with less technical experience, I'll share how to create an animated cursor with the IcoFX editor.

How to Make an Animated Cursor With IcoFX

The IcoFX allows you to create a custom cursor or customize one of their preloaded animated cursors. Below, I'll outline the process for creating a custom cursor.

1. First, I open the IcoFX Editor and select the File/New/New Cursor… menu item to open a New Cursor dialog.

Image Source

2. Then, I select the color and size of the cursor I want to create. From there, I select the Animated Cursor radio button and click OK.

3. I can then use the Image/Add new Image menu item to insert multiple frames to make my cursor animated.

4. I can change the order of frames, delete them, or duplicate them as needed.

5. I can use the Image/Animation/Frame Rate… menu item to change the frame rate.

6. After, I go to the Image/Cursor/Hot Spot… menu item to set the hot spot of my cursor.

7. I can then use the Image/Cursor/Test Cursor… menu item to test it.

8. When I'm ready, I use the File/Save… menu item to save it.

How to Make an Animated Cursor with CSS and JavaScript

If you'd prefer to build one from scratch, here's avideo by Dev Ed that walks through how to create an animated cursor with CSS and JavaScript:

[Video: https://youtu.be/TpwpAYi-p2w]

Consider a Cursor Website

You don't have to learn how to code to find a cursor that matches your brand. You don't even need to peruse a million Tumblr blogs in search of code to copy! The three sites below offer a selection of cursors that can add additional intrigue to your site.

• How to Creative offers cursor packs that you can buy. This is a great option for those who want professional, simple cursors on their business's site.
• Custom Cursor has a number of clip-art style cursors for your site. If you're looking to design something fun and engaging, especially for children's audiences, look here first. Bonus, the cursors are free!
• Sweezy Cursors offers fun options inspired by popular culture, memes, and cartoons. If you run a pop-culture site and are looking for a cursor relevant to what you cover, check it out. One of my favorites? The dancing dinosaur you see all over TikTok.

Image Source

Building an Animated Cursor

Now that I have shown you cool examples of animated cursors, I will show you how I built one.

Step 1. Create HTML Elements

I did not have to use HTML elements to customize my cursor. I chose to keep it really simple and wrap the tag in a