When answering a client’s brief, you run down their list of requirements to make sure you address everything: lead capture form, refreshed website design, and so on.
But this list is just the starting point. The skill of an experienced design professional shines through when you take the project to places that the client didn’t request and couldn’t have imagined, like pulling inspiration from the latest web design trends or adding small but differentiating flourishes like a custom cursor.
Sure, a cursor is small. But a custom cursor packs a big punch. No matter where you are on a website—scrolling past headlines, key imagery or entrance animations—the cursor stays with you throughout the journey. It’s the most continuous piece of real estate you have on the website, so why not use it to your advantage?
In a sea of creative professionals who know responsive web design and can write custom CSS, an element like a custom cursor does more than help your creative services stand out (so you can win more business). It also helps your clients’ sites stand out. Read on for custom cursor examples, plus ways to implement them on your next site.
Wait, what’s a custom cursor, exactly?
A cursor has been a fundamental component of digital experiences since the dawn of (computer) time. Whether by means of mouse, trackpad or touchscreen, a user moves a cursor to control a digital device’s actions such as selecting, opening, highlighting and dragging, and cursor shapes differ according to the intended action.
Generally speaking, cursor designs have remained relatively unchanged over the decades, give or take a pixel here and there. On the one hand, this enduring familiarity gives us that warm and fuzzy feeling, that the nostalgic cursor doesn’t age one bit, even as we computer users sprout gray hairs. On the other hand, because the cursor is unwavering, it’s a prime target for design disruption.
Operating systems like Windows and iOS have allowed users to adjust the system cursors for some time, first to relieve accessibility obstacles and later for aesthetic preferences. But this cursor setting is universal and controls how a cursor appears across all windows.
Unlike operating system cursors, custom cursors in web design control how a cursor appears within the confines of a particular website. Initially this was only possible with custom code but now, thanks to no-code web creation platforms like Wix Studio, all web creators can add this unique touch to their site designs. (More on that later.)
But bear in mind that when setting out to make a responsive website, there are some limitations with custom cursors. While they aren’t at odds with mobile design best practices, they won’t appear on mobile screens unless an external mouse is attached.
Related: Understanding mobile-first vs responsive web design
The best way to understand the potential for and range of custom cursors is to dive into the examples below to fuel your inspiration.
10 custom cursor examples
01. DrumSpirit
DrumSpirit employs a modern take on the classic arrow cursor. The simplicity of the line-based arrow—unlike the standard filled-in arrow—contrasts the site’s vibrant red palette, large photos and videos and patterned scroll effects. Note that even on a dark background, you never completely lose sight of the cursor, thanks to the thoughtful synchronization between the cursor and background colors.
This minimalist arrow stands out on simpler sites with little or no line work, but it also suits bold sites with layouts and graphics that already command a lot of attention.
02. Alchemy Studio
Another subtle custom cursor example, Alchemy Studio opts for a miniature, hollow circle. Glide through the site and the circle transforms, seamlessly adopting various colored backgrounds. Arrive at the site’s footer and there’s a final, subtle cursor transformation.
This circle cursor can be subdued and minimalist, as well as colorful and playful. Alchemy Studio embraces both. It’s an elegant and unobstructive way to add personality and surprise to your next site.
Matilde Magagnoli puts her custom cursor to work as both a navigational guide and a call-to-action in one. Arriving from her single-section homepage to her richer project page, the cursor’s CTA signals to explore what’s below the fold. The cursor is also contextual—as soon as the CTA is no longer relevant, it changes into a brand colored element for the remainder of the page.
A CTA cursor is both a subtle and creative way to reinforce the most important action you want from your users. As in this site, it could drive content exploration and consumption. On shopping sites, the custom cursor could emphasize a sale or limited time offer. Keeping the cursor’s CTA contextual is a powerful mechanic. Be sure to switch to an alternate custom cursor as soon as the CTA is no longer relevant to the site content around it.
04. Sara Menendez
Custom cursors can break free of standard shapes, and reference unique elements from a site’s brand identity instead. What you see in Sara Menendez’s portfolio site is the continuity of a star or asterisk-like shape, appearing within her site’s navigation, across the page as interactive decorative elements, and as the site’s cursor. We refer to this as “matching luggage” across the pages—even though it’s a non-traditional shape, it’s the singular shape that appears repeatedly and pulls everything together visually. This consistency results in a thoughtful, clean design, and everything appears as one connected design family.
A custom cursor that leverages branded iconography or a logo can reinforce unique, visual elements that distinguish your look and feel. Choose simple and clean shapes that don’t interfere with a user’s flow across your site.
05. Strategy Folk
Sometimes a custom cursor is best used to draw attention to a single section or message, as on this site from Strategy Folk. In this instance, the custom cursor disrupts the otherwise standard browsing experience and allows Strategy Folk to emphasize their service offering. See how the site uses a range of creative effects, such as a custom cursor and scroll effects, but at a very low volume. Each effect has a clear purpose—driving attention to a specific key message—and the site always feels balanced and professional.
Leaning into “less is more,” consider if your site has one or two hot areas you want visitors to look at just a bit more deeply. Using a custom cursor in this limited way can help a singular message stand out, such as a limited offer or your store hours.
While some custom cursors are abstract, decorative figures, Vaibhav Vidyadhar’s portfolio site opts for a more definitive and purposeful cursor design. Choosing a pen-styled cursor that aligns with his brand and service offering, Vidyadhar gently reminds visitors of the creative services he provides. Plus, this custom figure only appears over selective sections that Vidyadhar wants to emphasize: areas of the site where he goes into detail on each skill in his arsenal.
Your custom cursor can take a more recognizable shape if there’s something specific you want the user to know or to feel. For example, a Japanese restaurant’s site could use a sushi cursor while a comedy club could use a happy-cry-face emoji cursor. Just make sure the cursor reinforces what your business does and doesn’t distract from or impede the site’s flow.
07. en[i]gma
The custom cursors on the site for the en[i]gma Coding Championship feel in harmony with the brand identity that surrounds them. The site’s design references the days gone by of coding and computing—pixelated graphics, retro animations and nostalgic icons—and the alternating custom cursors serve as Easter eggs for users to discover as they navigate the site. A kids’ coding competition should be fun, so why not the same for the site?
Custom cursors can be configured at a site’s section level, giving surprise and variety as different sections or elements trigger unique cursor designs. Even better if you can make each cursor contextual. For example, a hotel website could feature a pillow cursor on the fold about rooms and a martini cursor on the fold about the bar.
08. Poolinside
Line-based illustrations—like those on this site for Poolinside—give cursors a sleek and minimalist look, and can easily take on any desired color for extreme versatility. Note that these custom cursor examples change color to always stand out from the background design. And because Poolinside sells a range of product categories, the product-inspired cursor design reinforces the wide product range on offer.
When choosing line-based illustrations for custom cursors, it’s necessary to be hyper-aware of the color contrasts on your site. Alternatively, you can add a thin, contrasting border around your cursor so that it’s always visible, regardless of the background elements.
09. Treep Tours
Some brands are well suited for sites with full-throttle cursor customization, and Treep Tours is one of them. As a tour company, their business provides rich, real-world experiences and the site—a potential customer’s first stop in the sales process—needs to bring this to life in order to get bookings. Plus, the brand is all about energy, passion and culture, which the site’s imagery and tone-of-voice proudly demonstrate. So, it’s only natural to have cursors that match, right? Nearly every page features a unique cursor, like a snail or a burrito. That’s the kind of attention to detail a customer hopes to have during their tour experience.
Find a unique image that in a smaller, cursor size is still clear and engaging, otherwise you risk confusing your users rather than impressing them. Whether you go for one custom cursor or more, choose images that match your site’s personality—an artisanal bakery can have colorful pastry cursors, while a cocktail bar can have various standard serving glasses. (When creating your unique image for a cursor, follow the image guidelines below.)
Rather than present cooking classes with an academic look and feel, this site serves up the curriculum with an accessible and colorful vibe. Throughout the site, the custom cursors change to support the site’s content, including general messaging, which showcases universal cooking iconography, and individual course modules, in which cursors reflect the highlighted cuisine. This panoply of contextual cursors is choreographed with precision, each one turning on and off in the relevant spot at the right time.
You can mix up your custom cursor triggers to best suit your site design, setting some cursors to appear across entire sections and others to appear only on smaller, individual elements. However you mix it up, contextual and unobtrusive cursors create the most seamless user flow for your site.
How to create custom cursors for your website
Use a templated custom cursor
For a quick way to get started with custom cursors, lean into templated website layouts. These Wix Studio templates give you ready-to-go responsive sites with website animations, custom cursors, and more:
The custom cursor on this digital marketing agency template is a play on the traditional pointer shape and adds a flair of surprising color.
This pizza restaurant template features five custom cursors inspired by the brand’s casual vibe and configured to appear in different sections of the website.
Design a custom cursor
It’s not always necessary to design your own cursor because some web creation platforms provide a library of ready-to-go alternative cursors. Wix Studio, for example, offers over 200 cursor options for free from the Wix Media Library.
If you opt to design something bespoke, consider these best practices:
Use JPG, PNG or SVG as your file types.
Add a defined border to your image that contrasts with the site background; that way, your cursor will never accidentally disappear if its primary color matches the background.
Configure a custom cursor
Configuring, or integrating, a custom cursor will depend on how you’re building your website.
Write code—like CSS and/or JavaScript—if you’re coding your website from scratch, or if you’re using a web creation platform that doesn’t offer a custom cursor but gives you the option to add custom code.
Use a code-free custom cursor tool if you’re using a web creation platform that comes with this out-of-the-box feature. This cuts down on time and complexity, makes it easier to experiment with new styles and allows you to change your design on the fly. Wix Studio’s design suite offers a code-free custom cursor function, so you can easily add your own cursor image or choose from pre-loaded alternative cursors.
Finally, set controls for where and when the custom cursor appears, either with your custom code or your code-free cursor control panel. For example, you could choose to have one custom cursor appear across your entire site, or you could set different cursors to appear in different sections of your site.
Use Wix Studio’s CMS to create a content-rich site—without any code.
.png)
.jpg)
.jpg)
