15 Animated Cursor Effects & Ideas for Your Website [+ How to Make One]

So many factors affect the user experience that it can be easy to overlook some. Cursors, for example, are an understated element that can have a big impact on a site’s UX.

When used correctly, cursors convey what’s happening or what’s possible on a site. For example, when hovering over a table element, the cursor may change to indicate the user can resize a row or column. Or, when attempting to drag and drop an image to a particular section on a website, the cursor may change to indicate that action is prohibited.

In addition to indicating a certain functionality, cursors can be animated to add some interactivity to the user’s browsing experience. Let’s take a look at some possible cursor effects and ideas below, then walk through how to make an animated cursor.

Cursor Effects

Custom cursors are popular in website design because they provide an opportunity to wow visitors who are expectating 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 wake, or 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. Eye 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: The eye 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, 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 Ideas

If you’re feeling inspired by the examples above, then you want to implement cursor effects on your own site. 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.

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.

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 an after shadow when the cursor lands on a link.

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

4. Cursor with Spinning Text

See the Pen Animated Cursor Interaction by Sikriti Dakua (@dev_loop) on CodePen.

In the Pen above, you’ll see a cursor made up of two circles. When hovering over one of the elements, the second circle will transform into text. For example, if hovering over the YouTube icon, the circle cursor will be surrounded by spinning text that says “YouTube.” If hovering over the link, the spinning text will say “Go here!”

What we like: This cursor helps provide additional context to users so they know exactly what they’re hovering over and can either click away from the page confidently, or keep scrolling.

5. Expanding Cursor on Hover

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

In the Pen 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.

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

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:

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.