Online Tool Store Online Tool Store

Cursor Preview Tool

Preview built-in CSS cursors or a custom image, set its hotspot and fallback cursor, and copy the generated CSS locally in your browser.

This works right here on your device — nothing gets sent out.

Hover here to preview the cursor

How it works

  1. Choose a built-in CSS cursor or upload your own PNG, ICO, or GIF image.
  2. For a custom image, set the hotspot coordinates and choose the fallback cursor.
  3. Hover over the preview, then copy the generated CSS cursor declaration.

Why a cut cannot always land where you asked

[K] � � � � � � [K] � � � � � � [K]

FAQ

What built-in CSS cursors are available?

Common values like pointer, move, grab, crosshair, zoom-in, not-allowed, and resize arrows - the standard set defined by the CSS cursor property.

Can I preview a custom cursor image?

Yes - upload a PNG, ICO, or GIF, then set its hotspot and fallback cursor. It is applied over the preview box so you can test it before adding it to your site.

What is a cursor hotspot?

The hotspot is the image coordinate used as the click point. Set X and Y to move that point away from the image's top-left corner.

Why might a custom cursor not display exactly as expected in production?

Browser support, image size, and hotspot positioning can vary - always test the final CSS across your target browsers.

How do I use the generated CSS?

Copy the cursor declaration and add it to the CSS rule for the element you want the custom pointer to apply to.

How we compare

FeatureOnline Tool Storesplit-video.comVideoKit
Live preview, all cursors at once ✓✗✗
Custom image cursor preview ✓✓✗
No code editing required ✓✗✓
Custom hotspot and fallback controls ✓✗✗

Explore related tools

Embed this tool

Paste this on your own site — it stays free, and every file still stays in your visitor's browser, not yours or ours.