Advertisement

Cursor tester

Hover every CSS cursor keyword to feel it live, then click to copy the cursor declaration. Includes all 37 standard keywords from auto to zoom-in.

Cursor keywords

Hover a tile to feel the cursor. Click to copy its CSS.

Test pad and CSS
Hover tiles on the left, then test your pick here.
Advertisement

Cursors as affordance language

Cursors are a silent UI language: pointer means clickable, text means editable, move means draggable, not-allowed means blocked. Matching the cursor to the action cuts down on confused clicks, especially in dense tools and editors.

The resize cursor family

Directional resize cursors like nwse-resize and ew-resize tell users exactly which way a handle drags. Use them on splitters, resizable panels and crop handles. The bidirectional pairs cover diagonals, the single-axis ones cover straight edges.

Cursor Tester FAQs

When should I use cursor: pointer?
On anything clickable that is not a native link or button: cards, table rows, custom dropdowns. Native buttons and links already show pointer by default, so you rarely need to set it on those.
What is the difference between grab and move?
Grab signals something draggable but not yet dragged, like a map or kanban card; grabbing shows while dragging. Move is the older generic dragging cursor. Prefer the grab pair for modern draggable UIs.
Can I use a custom image as a cursor?
Yes: cursor: url(pointer.png) 8 8, pointer. The numbers set the hotspot. Keep a keyword fallback after the URL for browsers that reject the image, and keep the file under 128px.
Why does cursor: none exist?
It hides the cursor, useful for drawing apps, games and fullscreen video where the system arrow would distract. Always provide an obvious way to get it back, like pressing Escape.
Do cursors matter on touch devices?
No, touch screens have no hover cursor, so never rely on cursor changes alone to communicate meaning. Pair every cursor cue with a visible affordance like an underline or icon.
Advertisement