CSS Cursor Generator
Generate CSS cursor values from a preset list (pointer, crosshair, wait, etc.) or upload a custom cursor image. Hover the preview box to test, then copy the CSS in one click.
Hover here to test the cursor
About the CSS Cursor Generator
The CSS cursor property controls what the mouse pointer looks like over an element. This generator covers two use cases: selecting from the standard built-in cursor keywords, or supplying a custom image (with an optional hotspot coordinate and a fallback keyword for browsers that can't load the image).
What you can do
- Preset cursors — Choose from all standard keywords (pointer, crosshair, wait, resize variants, etc.).
- Custom image cursors — Upload a
.cur,.png, or.giffile (kept in your browser as a data URL — nothing is uploaded). - Hotspot — Set the X/Y coordinate of the pointer's active tip.
- Fallback — Provide a standard cursor keyword used if the image fails to load.
How to use
- Pick Preset or Custom image mode.
- For presets, select a cursor keyword from the list.
- For custom images, upload a file or paste a URL, then set the hotspot.
- Hover the preview box to test the cursor.
- Click Copy CSS and apply it to any element.
Frequently asked questions
What image formats are supported? Browsers support .cur and .ani on Windows, plus .png, .gif, and .svg in most modern browsers. For maximum compatibility, use .cur at 32×32.
Is there a size limit? The spec recommends images 32×32 or smaller. Larger images may be scaled down or ignored by some browsers.
What is a hotspot? The hotspot is the pixel inside the cursor image that registers clicks. For a typical arrow cursor, that's the top-left corner (0, 0).