How to Create a Custom Cursor in Webflow

Learn how to create a custom cursor in Webflow: hide the native cursor, build the element, and make it follow your mouse.

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to create a custom cursor in Webflow to strengthen your website’s visual identity.

Example

Move your mouse here

CSS property	Value	Description
cursor	none	Hides the browser’s native cursor
position	fixed	The cursor follows the mouse
pointer-events	none	The custom cursor doesn’t block clicks
z-index	9999	Above all elements

1. Hide the native cursor

In your global Webflow styles, add cursor: none to the body selector.

2. Create the cursor element in Webflow

Add a Div in the body with the custom-cursor class. Set it to: Fixed position, 20px width, 20px height, 50% border-radius, a background color that matches your accent color, pointer-events: none, z-index: 9999. Leave it at 0,0 for now — the script will reposition it.

3. Add this script in the <body>

const cursor = document.querySelector('.custom-cursor');
document.addEventListener('mousemove', function(e) {
  cursor.style.left = e.clientX - 10 + 'px';
  cursor.style.top = e.clientY - 10 + 'px';
});
document.querySelectorAll('a, button').forEach(function(el) {
  el.addEventListener('mouseenter', function() { cursor.style.transform = 'scale(2)'; });
  el.addEventListener('mouseleave', function() { cursor.style.transform = 'scale(1)'; });
});

good to know

The custom cursor doesn’t appear on touch devices (mobile, tablet). Add a check to avoid hiding the native cursor on those devices: if (!window.matchMedia('(pointer: fine)').matches) return; before applying cursor: none.

Conclusion

A custom cursor strengthens the visual identity of creative websites. Use cases:

Portfolios and creative websites
Brand websites with a strong visual identity
Immersive landing pages

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss