CssHow-ToBeginner · 3 min read

How to Create Custom Cursor in CSS: Simple Guide

Use the cursor CSS property to set a custom cursor by specifying a URL to an image file and a fallback cursor type. For example, cursor: url('cursor.png'), auto; changes the pointer to your image with a default fallback.

📐

Syntax

The cursor property in CSS controls the mouse pointer appearance when hovering over an element. You can use built-in cursor names or specify a custom image URL.

cursor: auto; - Default cursor.
cursor: pointer; - Hand pointer.
cursor: url('image.png'), fallback; - Custom image with fallback cursor.

The URL must point to a small image (usually .png or .cur) and you can add coordinates for the hotspot (the exact click point) after the URL.

css

selector {
  cursor: url('custom-cursor.png') 4 12, auto;
}

💻

Example

This example shows how to use a custom cursor image on a button. When you hover over the button, the cursor changes to the custom image with a fallback to the default pointer.

css

button {
  cursor: url('https://cdn-icons-png.flaticon.com/512/32/32195.png') 16 16, pointer;
  font-size: 1.25rem;
  padding: 0.5rem 1rem;
  border: 2px solid #333;
  background-color: #f0f0f0;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #ddd;
}

Output

A gray button with rounded corners that changes background color on hover and shows a custom cursor image shaped like a small hand pointer.

⚠️

Common Pitfalls

Using large images for cursors can cause slow loading and poor user experience.
Not providing a fallback cursor can leave users with no pointer feedback if the image fails to load.
Incorrect hotspot coordinates make the click point feel off.
Using unsupported image formats or URLs blocked by CORS will not work.

Always test your custom cursor on different browsers and devices.

css

/* Wrong: No fallback cursor */
div {
  cursor: url('cursor.png');
}

/* Right: Fallback included */
div {
  cursor: url('cursor.png'), auto;
}

📊

Quick Reference

Property Value	Description
auto	Default cursor based on context
pointer	Hand cursor, usually for links
url('image.png') x y, fallback	Custom image cursor with hotspot at (x,y) and fallback cursor
crosshair	Crosshair cursor
text	Text selection cursor
wait	Wait or loading cursor

✅

Key Takeaways

Use the CSS cursor property with a URL and fallback to create custom cursors.

Keep cursor images small and set hotspot coordinates for accurate clicks.

Always provide a fallback cursor for better user experience.

Test custom cursors across browsers to ensure compatibility.

Use built-in cursor names for simple pointer changes without images.