In web development, creating a great user experience (UX) is just as important as building functional features. One thing I’ve learned over the years is that attention retention, or keeping visitors engaged, often comes down to the little details. And animation is one of the most powerful tools we have for that.
There are many types of animation you can add to a site, like hover effects, loading sequences, and parallax scrolls, but one subtle yet impactful element I really enjoy working with is the animated cursor.
You may have already come across animated cursors on websites, but if you haven't or want to learn more — and how to build your very own animated cursor with modern HTML, CSS, and JavaScript — then you should stick around, because I will be covering all that in this blog post.
Let’s get into it.
Table of Contents
50 Free Coding Templates
Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.
- Navigation Menus & Breadcrumbs Templates
- Button Transition Templates
- CSS Effects Templates
- And more!
Download Free
All fields are required.
You're all set!
Click this link to access this resource at any time.
What is a cursor, anyway?
A is your digital pointer; it’s how users interact with everything on your website. Whether they’re clicking a button, hovering over a link, or dragging an image, the cursor is the user’s constant companion. If you are reading this blog on a computer, you probably have one in front of you now.
I have come to realize that this small element plays a big role in user perception. It tells visitors what’s clickable, shows feedback during interactions, and helps guide their attention around the screen. By default, browsers give us a standard arrow or pointer.
Functional? Absolutely. But memorable? Not so much.
That’s where animated cursors come in.
By customizing and animating the cursor, you can:
- Create a more immersive experience.
- Align the cursor with your brand’s style or theme.
- Add delightful microinteractions that make your site feel polished and modern.
It’s a subtle change, but one that users feel, and in today’s design-driven web, that makes all the difference. 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, I’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. Magnetic Cursor Effect
Magnetic cursors are one of my personal favorites. They “pull” toward clickable items when you get close, creating a sense of magnetism that’s both fun and intuitive.
Example I like:
Obys uses a bold magnetic cursor that not only sticks to elements but also animates with smooth elasticity. It draws your attention while feeling satisfying to interact with.
2. Swirl Cursor Effect
The swirl cursor effect gives the illusion that your cursor is dragging a mini vortex behind it, a series of particles, circles, or blurred shapes that rotate and follow your pointer in a delayed, spiral-like path.
Example I like:
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.
3. Cursor as a Visual Tool
Sometimes the cursor is used not just to click, but to highlight, draw, or reveal content. Think of it like a flashlight or a highlighter.
Example I like:
Here, Basis Agency uses a circular cursor that acts like a spotlight on certain sections, revealing hidden elements or transitions.
4. Flashlight Cursor Effect
Sometimes the cursor is used not just to click, but to highlight or reveal content, almost like a flashlight scanning a dark room or maybe just as a means of decoration.
Example I like:
On one of the immersive layers showcasing the Dandelion Cranes Wallcovering, Moooi uses a flashlight-style cursor that lets users “illuminate” elements as they move their mouse. It’s interactive and mysterious; you feel like you're exploring hidden details on the page.
5. Particle Trail Cursor
Creates dynamic particle streams that follow cursor movement, often with physics-based behavior. Best for immersive experiences but requires careful optimization.
Example I like:
Move your cursor to generate WebGL-powered particles that react to velocity and form organic trails. Note the mobile-disabled implementation.
6. Dot Cursor Effect
Sometimes, a simple dot cursor can do more than just follow the mouse — it can become a key part of how users navigate and understand your site.
Example I like:
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.
7. Following Cursor Effect
This cursor effect creates a sense of motion and depth by introducing a trailing or shadow-like element that follows the main pointer.
Example I like:
Their cursor consists of two circles, a primary one that acts as the main pointer and a secondary one that follows behind with a slight delay. It gives the impression of a soft shadow or echo, creating smooth, natural motion as you move across the page.
8. Text Cursor Effect
This cursor style swaps the traditional pointer for a text-based call to action, turning the cursor itself into part of the UI language.
Example I like:
On their site, the default cursor is a clean black dot that aligns beautifully with the logo. But when you hover over a portfolio item, it transforms into a transparent circle containing a word, like 诲é肠辞耻惫谤颈谤 (“to discover”). It’s subtle but powerful, inviting users to explore further without any extra UI clutter.
9. Arrow Cursor Effect
Sometimes the cursor does more than point; it can guide navigation and help direct users through a site’s flow.
Example I like:
On their portfolio site, the cursor transforms into directional arrows as you scroll toward the top or bottom of the page. It’s a clever way to show users that more content is available and intuitively guide them forward or back.
10. Trailing Cursor Effect
This playful effect leaves a trail behind the cursor, turning ordinary movement into a visual experience that reflects a brand’s personality.
Example I like:
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.
50 Free Coding Templates
Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.
- Navigation Menus & Breadcrumbs Templates
- Button Transition Templates
- CSS Effects Templates
- And more!
Download Free
All fields are required.
You're all set!
Click this link to access this resource at any time.
HTML Cursor Codes
For inspiration, consider using these cursor effect ideas on your website. Here are some CodePen-sourced concepts that make copying and pasting the code simple.
Spotlight Cursor Text Screen
See the Pen by Caroline Artz () on .
In the example above, the screen is dimmed with a black overlay, and only a circular spotlight follows your cursor to reveal hidden white text beneath. The spotlight moves fluidly, making the rest of the screen feel like a dark room.
What I like: This cursor effect feels cinematic and immersive.
Example use cases: Great for portfolios and storytelling websites.
Satisfying Curly Cursor
See the Pen by Ksenia Kondrashova () on .
This cursor effect feels alive, like a swirling ribbon dancing in response to your movements. It’s more than just a pointer; it’s a satisfying, physics-based trail that adds elegance and energy to your design.
What I like: The motion is smooth and reactive to velocity, which makes it feel dynamic, fluid, and incredibly fun to interact with.
Example use cases: This cursor effect is great for portfolio sites, creative agency homepages, and interactive art and design pages.
Animated Icon Cursor on Hover
See the Pen by Nharox () on .
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.
Mouse Cursor Motion Blur
See the Pen by Ignacio Correia () on .
If you're into sleek, futuristic cursor effects, this one’s a stunner. The cursor leaves behind a motion-blur trail that fades as it follows your pointer, creating a ghosting effect similar to high-speed motion capture.
What I like: This effect simulates a blurred trail behind the cursor using multiple circle elements that follow the cursor's path with slight delays, creating a smooth motion illusion.
Example use cases:
- Portfolios or agency sites with a tech/UX design focus.
- Gaming or cyberpunk-themed websites.
- Interactive storytelling and scroll-triggered sites.
Expanded Image Cursor on Hover
See the Pen by Ivan Grozdic () on .
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.
How to Make an Animated Cursor
After seeing websites with amazing animated course effects and other interesting CodePens with interesting cursor effects, it's time to create our own basic animated cursor.
In the example below, I will create an animated cursor in four simple steps. Before I dive into creating the animated cursor, though, I must first have my code editor set up with the right files I will be using.
In the code editor, I created a folder called animated cursor effect, and in that folder, I have added the three files I will be using to create the animated cursor:
- HTML - index.html
- CSS - style.css
- JavaScript - script .js
And without further ado, let's get right into the four steps.
Step 1: Set up the HTML structure.
First, I create a basic HTML page with a div that will act as the animated cursor.
In the code above, you can see the code for the webpage and the animated cursor. I also added a link and source to my CSS file and JavaScript code because I will need them soon.
Step 2: Style the page and hide the default cursor.
Here, I use CSS to hide the system cursor and define the look of my custom one. I also added some basic style to the webpage so it looks presentable.
Step 3: Add JavaScript to make the cursor follow the mouse.
Now I will animate the cursor position using the mousemove event listener.
This ensures the custom element moves wherever your real mouse would go.
Step 4: Animate the cursor on hover (e.g., links).
Finally, I can add a hover effect to give users visual feedback when hovering over interactive elements like <a> tags. To do this, I can add the hover effect in JavaScript.
With this, I have just created my very own custom animated cursor.
This is the output of my code:
Here is the Codepen:
See the Pen by Clinton Joy () on .
Need more help? For an in-depth explanation on creating an animated cursor, here’s a that walks through how to create an animated cursor with CSS and JavaScript:
Consider Using Existing Animated Cursors From 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 interest to your site.
- offers cursor packs that you can buy. This is a great option for those who want professional, simple cursors on their business’s site.
- 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!
- 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.
Animating Your Cursor
Whether you're looking to animate your operating system’s cursor or add a playful twist to your website, this design trend is a creative way to personalize the UX on your site.
My recommendation? Explore the examples above for inspiration, then either download ready-made code from CodePen, or roll up your sleeves and build your own from scratch.
Editor’s note: This post was originally published in February 2022 and has been updated for comprehensiveness.
50 Free Coding Templates
Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.
- Navigation Menus & Breadcrumbs Templates
- Button Transition Templates
- CSS Effects Templates
- And more!
Download Free
All fields are required.
You're all set!
Click this link to access this resource at any time.
Website Design Examples
![15 black and white website designs to inspire your own [+ pro tips]](https://knowledge.hubspot.com/hubfs/black-and-white-website-design-1-20250520-1336267.webp)
![14 Stunning HTML Websites [+ How They Work]](https://www.hubspot.com/hubfs/Copy%20of%20Featured%20Image%20Template%20Backgrounds-1.webp)
![15 of the Best Interactive Websites [+ How to Make Your Own]](https://knowledge.hubspot.com/hubfs/interactive-websites-1-20250123-3049018.webp)
![30 Furniture Website Design Examples I Love [+ How To Make Your Own]](https://www.hubspot.com/hubfs/Google%20Drive%20Integration/furniture%20website%20design_32023-1.png)
