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.
How it works
- Choose a built-in CSS cursor or upload your own PNG, ICO, or GIF image.
- For a custom image, set the hotspot coordinates and choose the fallback cursor.
- 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
| Feature | Online Tool Store | split-video.com | VideoKit |
|---|---|---|---|
| Live preview, all cursors at once | ✓ | ✗ | ✗ |
| Custom image cursor preview | ✓ | ✓ | ✗ |
| No code editing required | ✓ | ✗ | ✓ |
| Custom hotspot and fallback controls | ✓ | ✗ | ✗ |