Cursor hotspot editor

Put the click exactly where it belongs

Open a cursor image or an existing .cur file, click the pixel that should do the clicking, and export a .cur with the hotspot built in, plus a PNG and the CSS.

Drop, paste or choose a cursor image

PNG, GIF, WebP, SVG, JPEG, .cur or .ico. Press Ctrl+V (⌘+V on a Mac) to paste.

No image yet

Hotspot –

Output size

Longest side

Load an image to check its size.

Try it

Point here and click a target

Export

File name

Fallback cursor

.your-element {
	cursor: url("cursor.png") 0 0, auto;
}

How to set a hotspot

Open the cursor. Drop, paste or choose a PNG, SVG or other image, or an existing Windows .cur or .ico file. A .cur opens with the hotspot it already has.
Click the pixel that clicks. The tip of an arrow, the end of a finger, the middle of a crosshair. Find the tip picks the visible pixel nearest the top-left corner, which suits most arrows. Arrow keys fine-tune it.
Check it. Click the targets: the page tells you how far from their centre the click landed.
Export. The .cur file carries the hotspot inside; the CSS carries it as two numbers after url().

Sizes and numbers

Hotspot numbers are image pixels counted from the top-left corner, which is 0 0, and browsers clamp them to the image. When you shrink a large image under Output size, the hotspot moves with it.

Keep cursors at 32 × 32 or smaller. Firefox and Chromium ignore images over 128 × 128, and Firefox has limited custom cursors to 32 × 32 since version 67 (MDN).

Questions

Can I open animated .ani cursors?

No. Only still .cur and .ico files open here. Save one frame of the animation as a PNG and open that instead.

Where does the hotspot live in a .cur file?

In the file's directory entry, as two numbers next to the image size. That is why CSS can use a .cur without coordinates.

What if I leave the hotspot out of the CSS?

The browser reads it from the file if it can, otherwise it uses the top-left pixel, 0 0.