~/css/cursor-generator
CSS Cursor Generator
Hover the preview to try every standard CSS cursor, from pointer and grab to zoom-in and not-allowed, or build a custom circle or arrow cursor in your own colour and size. The CSS always includes a keyword fallback.
Move your mouse over this area
pointerUsing the CSS Cursor Generator
Cursors tell people what will happen
The cursor is a promise: pointer means clickable, text means selectable, grab means draggable, not-allowed means disabled. Using the right keyword makes an interface feel predictable. Using pointer on things that are not clickable does the opposite.
Custom cursors
The cursor property accepts an image URL, including an inline SVG data URI like the one this generator writes, followed by the hotspot coordinates and a keyword fallback. The hotspot is the exact point that clicks: the centre for a dot, the tip for an arrow.
Size limits
Browsers cap custom cursor images, commonly at 128 by 128 pixels, and some reduce larger images. Keep custom cursors small, around 24 to 32 pixels, so they feel precise.
Use sparingly
A custom cursor across a whole site can feel slow and confuse people who rely on the system cursor, especially with accessibility settings that enlarge it. Use custom cursors for specific areas such as a canvas, a game or a gallery.
Frequently asked questions
Why is a fallback keyword required?
The CSS specification requires a keyword at the end of the cursor list, used if the image fails to load.
Do custom cursors work on touch screens?
No. Touch devices have no cursor, so make sure nothing depends on it.
Can I animate a cursor?
Not with the cursor property. Animated cursors need a JavaScript-driven element that follows the mouse.