How to Create a Custom Cursor in Webflow

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

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)'; });
});

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