15 Animated Cursor Effects & Ideas for Your Website [+How to Build Your Own]

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.

You could code it yourself or choose from a number of themes. When I kicked off my blog, I wanted to get my aesthetic just right. That included 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. A cursor in a custom shape or with custom animation on click can add visual intrigue, enhancing the user experience.

Below, we'll explore cursor effects that can level up your site. Then, we'll explore when to use animated cursors.

Table of Contents

• What is a cursor, anyway?
• Types of Cursor Effects
• Cursor Effect Ideas
• How to Make 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 helps the user keep track of where they are on the web page and adds unique splashes to this black-and-white website design.

What we 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.

What we 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 users move their cursor over the page, the background distorts, becoming larger and darker. Users are 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 we like: The distort 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.

What we 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 users can more easily locate where they are and move around the content-rich site.

What we 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 we 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 the user scrolls toward the top or bottom of the page, the cursor becomes an arrow to guide the user on where to go next.

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

8. Spinning Cursor Effect

Image Source

thePenTool combines hover animations and cursor effects to help users browse the different products they offer. When a user hovers over a product, the background color changes, and the cursor becomes a ballpoint pen at the center of a black circle. The circle also contains spinning text that encourages users to check out the product.

What we like: The spinning cursor effect helps draw the user's attention to each individual product.

9. Fade-in Cursor Effect

Image Source

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

What we 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

PPP uses a trailing cursor effect to mark the user's scrolling path. As you move around the page, a series of colorful circles will trail behind the cursor. It recalls the retro snake computer game - but with a modern and playful twist. This is exactly on brand with PPP, which aims to design experiences that combine play and gamification.

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

Cursor Effect Ideas

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 we like: This colorful cursor helps users easily locate where they are 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, you'll see the default mouse pointer of your OS - unless you're 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 we 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.

What we 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.

Pro tip: 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 easy to see. If your site has a light background, do the inverse.

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.

What we 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.

Pro tip: 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.

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

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, let's walk through 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, we'll outline the process for creating a custom cursor.

1. Open the IcoFX Editor and select the "File/New/New Cursor…" menu item to open a New Cursor dialog.

Image Source

2. Then select the color and size of the cursor you want to create, and select the Animated Cursor radio button. Click OK.

3. Use the "Image/Add new Image" menu item to insert multiple frames to make your cursor animated.

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

5. Use the "Image/Animation/Frame Rate…" menu item to change the frame rate.

6. Use the "Image/Cursor/Hot Spot…" menu item to set the hot spot of your cursor.

7. Use the "Image/Cursor/Test Cursor…" menu item to test it.

8. When you're ready, 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 a video by Dev Ed that walks through how to create an animated cursor with CSS and JavaScript:

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 of their business' 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

Animating Your Cursor

Whether you want to animate the cursor of your operating system or your website, this design trend can help personalize your computer and website. Find inspiration from the websites above, then download the code from CodePen or create an original one from scratch.

Editor's note: This post was originally published in February 2022 and has been updated for comprehensiveness.

Topics:Website Design Examples

Don't forget to share this post!