CSS Cursor Tester

Preview every CSS cursor value and copy the one you want.

Presets:

Total Cursors: 29Selected Cursor: pointerCSS Length: 16 B

Hover any tile to see its cursor — click to select

Test Area (Hover below)

Hover here to test "cursor: pointer"

CSS

cursor: pointer;

Choosing the right cursor

The CSS cursor property controls the mouse pointer shown when hovering an element — a small but important affordance. Use pointer for clickable things, not-allowed for disabled controls, grab/grabbing for draggables, and the resize cursors for handles. Hover the tiles above to feel each one, then copy the value. It all runs in your browser.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Seeing every cursor value rendered so you can pick the right one.
Checking which cursor a platform actually shows for a value.
Finding a cursor that communicates a drag or a resize affordance.
Comparing similar cursor values side by side.
Confirming a cursor value is supported before using it.

Frequently Asked Questions

What is the difference between `auto` and `default`?: `auto` lets the browser choose from context — an I-beam over text, an arrow elsewhere — while `default` forces the plain arrow everywhere, including over text. Setting `cursor: default` on a body is a common way to accidentally suppress the text cursor that tells users something is selectable.
Should a button get `cursor: pointer`?: It is a genuine disagreement. Browsers do not apply it to `<button>` by default, on the reasoning that the hand cursor historically meant a link; most design systems add it anyway because users have learned it means clickable. What matters is consistency — half your buttons showing a hand is worse than either choice.
Why does the cursor look different on my colleague's machine?: Because the shapes are drawn by the operating system, not the browser. CSS names a role and the OS supplies the bitmap, so `grabbing` and the resize arrows look noticeably different across Windows, macOS and Linux — and some Linux cursor themes have no distinct art for the rarer keywords at all.
When should I use `grab` and `grabbing`?: `grab` on the resting state of anything draggable, and `grabbing` while the pointer is down. Swapping to the closed hand on mousedown is the feedback that makes a drag feel connected — omitting it is why some drag interactions feel like the element is lagging behind the pointer.
Can I use my own image as a cursor?: Yes: `cursor: url(hand.png) 4 4, pointer`. The two numbers are the hotspot coordinates — the actual click point inside your image — and the keyword after the comma is a mandatory fallback. Keep it under 32×32, since larger images are ignored outright by several browsers.

Common errors and gotchas

Using `pointer` on a non-interactive element, which promises an action that does not exist.
Using `cursor: none`, which leaves users unable to see where they are pointing.
Assuming cursors look the same across platforms, since each operating system draws its own.
Relying on a cursor to convey state, which touch users never see at all.
Using a custom cursor image without a keyword fallback.