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鈥檒l explore cursor effects that can enhance your site鈥檚 appeal, along with when to use animated cursors.
Table of Contents
convey where a user鈥檚 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鈥檚 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.
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鈥檒l share examples of creative cursors in use.
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鈥檙e especially popular on creative websites, like agency and designer portfolios. Below are real websites with unique cursor effects.
Advanced Team uses an advanced cursor effect that makes the user鈥檚 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.
On Moooi鈥檚 interactive site Paper Play, users scroll through various 鈥渋mmersive 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.
Utsobo is one of the coolest interactive websites. As I move my cursor over the page, the background distorts, becoming larger and darker. I鈥檓 actually invited to 鈥渄raw 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鈥檙e already part of a collaborative design process.
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鈥檚 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.
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 鈥渇ollow鈥� 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.
On CraieCraie鈥檚 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鈥檒l notice the cursor contains the word d茅couvrir, which means 鈥渢o 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.
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鈥檚 journey and encourages them to keep browsing.
Angello Torres combines hover 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鈥檚 stance.
What I like: The blurred effect is a great way to allow users to visually feel the artist鈥檚 message.
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 鈥渃lick 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.
Lisa Says Gah uses a trailing cursor effect to mark the user鈥檚 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鈥檚 also perfectly on brand.
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.
See the Pen by Georgy Marchuk () on .
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.
See the Pen by Nharox () on .
Above, I see my OS's default mouse pointer 鈥� unless I鈥檓 hovering over one of the colorful blocks. Then, the cursor becomes animated, starting as an 鈥淴鈥� icon and rotating until it鈥檚 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.
See the Pen by Stephen Scaff () on .
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.
See the Pen by roeslein () on .
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鈥檚 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鈥檛 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:
See the Pen by Ivan Grozdic () on .
In Ivan鈥檚 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鈥檚 understanding of certain words or sentences.
See the Pen by Eric Gruby () on .
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.
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鈥檒l share how to create an animated cursor with the
The IcoFX allows you to create a custom cursor or customize one of their preloaded animated cursors. Below, I鈥檒l 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.
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鈥檓 ready, I use the 贵颈濒别/厂补惫别鈥� menu item to save it.
If you鈥檇 prefer to build one from scratch, here鈥檚 a that walks through how to create an animated cursor with CSS and JavaScript:
[Video: ]
You don鈥檛 have to learn how to code to find a cursor that matches your brand. You don鈥檛 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.
Now that I have shown you cool examples of animated cursors, I will show you how I built one.
I did not have to use HTML elements to customize my cursor. I chose to keep it really simple and wrap the <p> tag in a <div> called container to write basic instructions for my demo.
I used the body selector to target the default cursor and set its property to be hidden.
Next, I created a class selector name and set its properties to the following to achieve my desired cursor. I want to have a circular cursor that changes colors. I set the position to fixed to make sure that the element stays put when the user moves around the page. Setting the width and height properties at 20px was the perfect size for me, but feel free to make your circle as large as you鈥檇 like.
Yellow is my favorite color, so I used it as the initial background-color when the page loads. Whenever I want to control the stacking order of my elements I take advantage of the z-index property. This property is best to use when you need to control how elements overlap. I set its value to 999 to give it a high probability to overlap all of the elements on my web page.
Last but not least, I created a function that uses an event listener to create my customized cursor when the HTML document loads. I use event listeners often when I code with Javascript because they are a great way to fire changes according to the user鈥檚 activity.
So, I decided to use the mouse move event listener to capture the position of the cursor. I stored the updated position values in the cursor.style.left and cursor.style.right variables. These variables are important because they tell the program that the cursor鈥檚 color needs to be changed.
Now I have to randomly update the cursor's color. I used the position of the cursor to help me randomly generate a value to store in the hue variable. This will help the color of the cursor change dynamically as the user moves about the web page.
A good thing to keep in mind is that the color wheel can be represented in degrees from 0 to 360. I took advantage of this and used the 鈥渉蝉濒鈥� function to pass the hue value to generate random colors for my custom cursor.
And here鈥檚 the result!
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.