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

How to Create a Custom Cursor in Webflow

Example

1. Hide the native cursor

2. Create the cursor element in Webflow

3. Add this script in the <body>

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

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials