Cursor Generator

How to use it

1. Pick a keyword from the built-in list, such as crosshair or grab, if you only need a standard pointer.
2. To use artwork instead, load a small image under Custom image cursor. It is read with FileReader and embedded as a data URL, so nothing leaves your device.
3. Set the hotspot X and Y in pixels. The hotspot is the exact point inside the image that clicks, so 0 0 means the top-left corner.
4. Choose a fallback keyword from the list. Engines that cannot load the image fall back to it, so a rule never leaves the page without a pointer.
5. Move your pointer over the preview box to try it, then copy the CSS. The rule is a single cursor: declaration.

Common use cases

• Canvas and editor tools - a brush or eraser image makes the active tool obvious at a glance.
• Drag handles and sliders - ship grab and grabbing so draggable elements feel tangible.
• Game and creative sites - themed pointers add character without touching layout.
• Design systems - document one cursor rule per interaction and keep the fallback honest.

Why it stays private

The image is converted to a data URL inside the page and written straight into the generated CSS. There is no upload endpoint, no server call and no storage, so unreleased artwork stays on your machine.

FAQ

Q: How large can the image be? A: The tool refuses files above 512 KB, and most browsers scale or ignore cursor images larger than 128 by 128 px. Export a small PNG or ICO at 32 px or 64 px for the sharpest result.

Q: What exactly does the hotspot do? A: It marks which pixel of the image counts as the click point. For a crosshair drawn in a 32 px image, 16 16 puts the centre on the target; 0 0 makes the top-left corner the click point.

Q: Why does the rule always end with a keyword? A: The trailing keyword is the fallback. If the image fails to load, is too large for the engine or is still decoding, the browser shows that keyword instead of no pointer at all.

Q: Does it work with SVG images? A: Current Chrome, Edge and Firefox accept SVG cursors; Safari historically prefers raster formats. The fallback keyword covers the engines that skip the image.