Cursor Cove

Custom cursor maker & CSS cursor tools

Custom cursor maker

Draw your own cursor, pixel by pixel

Paint on a 32 × 32 grid or import a picture, set the hotspot, wave it around this page, then download a PNG, a Windows .cur file and ready CSS. Nothing is uploaded.

Cell –

Hotspot 0, 0

Arrow keys move the cell marker, Space or Enter uses the current tool there. Keys B, E, G, I and H switch tools.

Colour Lagoon ink
100%
Edit the drawing
Move one pixel
Start from

PNG, GIF, WebP, JPEG, SVG, .cur or .ico. You can also drop a file on the grid or paste one.

Hotspot

The pixel that does the clicking. Use the Hotspot tool on the grid, or type it.

Try it

Point here, then click the middle of a target

1×
2×

Export

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

From blank grid to working cursor

  1. Start somewhere. Pick a starter shape, import a picture (it is scaled onto the grid), or clear the grid and draw from nothing.
  2. Draw. Pencil, eraser, fill and a colour picker, with undo. Outline rings the drawing in the current colour, which keeps a cursor visible on both light and dark pages.
  3. Set the hotspot. Choose the Hotspot tool and click the pixel that should do the clicking: the tip of an arrow, the centre of a crosshair.
  4. Try it. Point at the test area, click the targets to check the hotspot, or switch it on for the whole page.
  5. Export. Download the PNG (and a 2× copy), the .cur file, and copy the CSS.

What you get

The PNG is the file browsers use: cursor: url("cove-cursor.png") 0 0, auto, where the two numbers are the hotspot and auto is the fallback when the image cannot load.

The .cur file is a Windows cursor with the hotspot stored inside, so it works in Windows' own mouse settings (Mouse Properties, Pointers, Browse) and in CSS without the two numbers.

Your drawing is kept in this browser between visits. It is never uploaded.

More cursor tools

Four more ways to get cursors right, free and in your browser.

Questions

Why is the grid 32 × 32 pixels?

That is the size browsers handle best. MDN recommends cursor images of at most 32 × 32, Firefox has limited custom cursors to 32 × 32 since version 67, and Firefox and Chromium ignore anything over 128 × 128. For sharp edges on high-density screens, export the 2× copy as well.

What is the hotspot?

The single pixel that clicks. Its numbers count from the top-left corner of the image, which is 0, 0. An arrow needs the hotspot on its tip, a crosshair or ring on its centre. Click the targets in the test area to check it.

Should I use the PNG or the .cur file?

For a website, the PNG with the hotspot numbers in the CSS works in every desktop browser. The .cur file stores the hotspot itself, which Windows needs when you set it as your mouse pointer, and desktop browsers can use it in CSS too.

Is my drawing uploaded or saved?

Nothing is uploaded: drawing, importing and exporting all happen in your browser. Your current drawing is kept in this browser's local storage so it is still there next time; Clear and a new starter shape replace it.

Why does my cursor not show on my phone?

Touch screens have no pointer to draw, so cursors only appear with a mouse, trackpad or pen. An iPad with a mouse or trackpad does show url() cursors in Safari (since iPadOS 13.4, according to MDN's compatibility data).