Cursor Preview

Features

• More than thirty `cursor` keywords, grouped as basic / loading / drag and drop / zoom / resizing / scrolling / cell
• Move the mouse over the preview block to see the result instead of guessing
• Each value is named in plain language (`nesw` is bottom-left ↔ top-right, and so on)
• ⚠️ States that the appearance is decided by the operating system and cursor theme, so one keyword differs across systems
• ⚠️ States that touch devices show no pointer, so it cannot be the only cue
• Values pass a whitelist before being written into the declaration; no free-form input
• Copies a `.target { cursor: …; }` you can paste straight into a stylesheet

How to use

1. Find the keyword in the dropdown, which is grouped
2. Move the mouse over the block below to see it on your system
3. Copy the code and rename the selector

FAQ

Why does the pointer I see differ from your screenshot?

Because the appearance is decided by the operating system and the cursor theme — the browser only hands the keyword to the system to draw. The same `cursor: pointer` is a white hand on Windows, a pointing hand on macOS, and something else again on each Linux desktop; a user with a custom cursor theme, or the accessibility large-pointer setting, is yet another case. So all this guarantees is which keyword it is. Full control means supplying your own image via `url()`, and that involves hotspot coordinates, size limits (browsers allow anything from 32×32 to 128×128) and format compatibility — usually not worth it.

What is the difference between col-resize and ew-resize?

They look nearly identical and mean different things. `ew-resize` is “you can drag this sideways to resize”, a generic two-way arrow; `col-resize` is specifically for the divider between table columns, and most systems draw it as a two-way arrow with a vertical bar. Screen readers and some accessibility tools read that difference, so use `col-resize` for table column widths and `ew-resize` for general dragging. `row-resize` is the same idea for row height.

Why does nothing happen on a phone?

Because touch devices show no pointer at all — `cursor` has no effect on them. That is not a compatibility problem but the property’s own scope: it describes what the pointer looks like when the mouse is over an element, and a touchscreen has no “over” state. So if an interface only uses the pointer’s shape to say “this is draggable”, that information is simply absent on a phone. The pointer can only be an additional cue; whatever matters has to be expressed another way too — words, a visible handle, the shape of an icon.

Can I use a custom image for the cursor?

Yes (`cursor: url(hand.cur), pointer`), but this tool does not, for two reasons. It needs an image, and this tool’s shape is “pick a value, see the result” — adding an upload field makes it a different tool. And it is more fiddly than it looks: you specify a hotspot (which point of the image is the mouse position), there are size limits (browsers accept anywhere from 32×32 to 128×128 and ignore anything larger), `.cur` and `.png` support is inconsistent, and a failed load silently falls back to the default pointer — the user never learns their image did not load. If you do it, always end with a keyword as a fallback.

Which should I use, not-allowed or no-drop?

Depends on the situation. `not-allowed` means “this action is not permitted”, typically a disabled state; `no-drop` means “you cannot drop here”, used while dragging over an invalid target. The pointers look identical on many systems (a circle with a slash), and the difference is semantic — in a drag-and-drop context, `no-drop` is the accurate one.