CSS-Only Custom Cursor Demo

Move your mouse around to see the custom cursor. Hover over links and buttons to see the hover state.

Plain CSS Implementation

This demo uses the cursor: url() property with inline SVG data URIs. No JavaScript required.

Note: The cursor uses SVG data URIs embedded directly in CSS. In production, you'd typically use external image files (PNG or SVG) for better performance and caching.

Try hovering over these elements:

This is a link

Link as Button

How It Works

The CSS uses:

cursor: url(...) 6 6, default for the default cursor (dot)
cursor: url(...) 12 12, pointer for interactive elements (ring)
The numbers (6 6, 12 12) define the hotspot (click position)
The second value (default, pointer) is the fallback

Accessibility

The demo includes a media query to disable custom cursors on touch devices:

@media (pointer: coarse) {
  body, a, button {
    cursor: auto;
  }
}

Production Tips

Use external PNG or SVG files instead of data URIs
Keep cursor images small (32×32px recommended, max 128×128px)
Always provide fallback cursors
Test on different browsers and devices
Respect user preferences (reduced motion, touch devices)