Cursor Preview Tool
Choose a cursor or load an image from your device, hover the preview, and copy the CSS cursor declaration without uploading a file.
A QUICK WALKTHROUGH
How to use this tool
- Choose a built-in cursor or select a local PNG, ICO, or GIF image.
- Set the fallback cursor and hotspot X/Y values, then hover the preview area.
- Copy the generated CSS cursor declaration for your stylesheet.
Local preview only
Selected cursor files are read in this browser and represented as a temporary object URL. Nothing is uploaded, stored, or sent to a server. Reloading the page clears the local selection.
Browser cursor limits apply
CSS cursor images are commonly most reliable at 32 × 32 CSS pixels, but browser and operating-system limits vary. PNG, ICO, and GIF support also varies, and animated GIF cursors may be reduced to a still frame. Keep a usable fallback because a browser can reject an image or hotspot outside its supported range.
Hotspot and fallback
The hotspot is the pixel inside the cursor image that aligns with the pointer. X and Y must be whole numbers from zero through the selected image’s width and height minus one. CSS still includes the fallback keyword so the pointer remains usable when the image cannot be used.
GOOD TO KNOW
Common questions
Is my cursor file uploaded?
No. The file is read locally to preview it and build the CSS value. It is not sent to a server.
Why might the image not appear as the cursor?
Browsers and operating systems impose cursor image size and format limits. Use a small image, keep the hotspot inside its bounds, and rely on the selected fallback keyword.
What does the hotspot mean?
It is the image coordinate that should sit under the pointer. For a pointer arrow it is often near the tip; the correct point depends on the artwork.
Can I use an animated GIF?
You can select a GIF when your browser accepts it, but CSS cursor animation is not consistent. The preview may use a still frame, so keep the fallback meaningful.