All Native CSS Cursor Values
Hover any card below to try the real cursor. Click a card to copy its CSS.
Full Built-in Cursor Library • Custom SVG Cursor Builder
Hover any card below to try the real cursor. Click a card to copy its CSS.
This tool has two parts. The Built-in Library shows every native CSS cursor keyword value with a live hoverable demo, so you can find the right one (pointer, grab, zoom-in, and dozens more) without memorizing the list, and copy its exact CSS. The Custom SVG Cursor builder generates a small SVG shape, encodes it as a data:image/svg+xml, URI, and outputs a cursor: url(...) hotspotX hotspotY, fallback; declaration — the fallback keyword is always included since some browsers need it to render a custom cursor reliably, and the hex color's # character is properly escaped to %23 since an unescaped # would break the data URI. Custom cursor images work best at 32×32 pixels or smaller across browsers. All processing happens locally in your browser.