About the CSS Cursor Viewer
What is a CSS cursor viewer?
The cursor property decides what the pointer turns into over an element, and the specification gives it 36 keyword values. The names are only half the story though. Nobody can tell you what alias looks like from the word alone, and the drawing comes from the operating system rather than from your stylesheet, so the reference pictures on most pages are somebody else's screenshots of somebody else's machine.
This page shows every value as a card you can hover. What you see is your own pointer, drawn by your own system in your own browser, which is the only version that counts when you're deciding between two of them. Click a card and the declaration goes to your clipboard as CSS, as a Tailwind class, or as a line of JavaScript.
The second half of the page is the part other cursor galleries leave out. Load an image, drag a pin to the pixel that should sit under the pointer, and you get a working cursor: url() declaration with the fallback already in place and a strip underneath where you can try it.
How to Use This Tool
- Hover the cards. The cursor changes over each one. Moving between two cards in turn is the quickest way to tell
progress from wait, or move from all-scroll.
- Narrow it down. Search by name, or by what you want it to mean. Typing busy finds the two loading cursors and hand finds the three that use one.
- Pick your output. The dropdown decides what a click puts on your clipboard, so a Tailwind project gets
cursor-pointer rather than a declaration you'd have to translate.
- Load your own image. Drop a PNG or SVG into the builder. Keep it at 32 by 32 pixels where you can, because that's the size a standard display draws it at.
- Drag the pin. Wherever you put it is the pixel the browser treats as the tip of the pointer. On an arrow that's the point, on a crosshair it's the middle, and on a pen it's the nib.
- Choose a fallback and copy. The keyword after the image isn't optional, and the strip under the code shows you the result before you paste it anywhere.
Common Use Cases
Most of the value in this property is telling somebody what will happen before they commit to clicking, which is worth more than it sounds.
- Draggable panels and dividers:
grab at rest and grabbing while a drag runs makes a splitter feel like a physical handle.
- Disabled controls:
not-allowed on a button that can't be pressed answers the question before anybody clicks it twice.
- Canvas and drawing apps:
crosshair for precision, cell for anything on a grid, and a custom image for the current tool.
- Image galleries:
zoom-in on a thumbnail and zoom-out on the open lightbox, so the pointer says what the click will do.
- Long operations:
progress while a save runs in the background, since it says busy without claiming the page has stopped listening.
- Games and branded interfaces: a custom image with a carefully placed hotspot, which is the one case where replacing the system pointer earns its cost.
Frequently Asked Questions
Why does my custom cursor not show up?
Nine times out of ten there's no fallback keyword. The syntax is a list, and cursor: url(pen.png) on its own is invalid, so the browser drops the whole declaration and you get the ordinary arrow. Write cursor: url(pen.png) 4 4, crosshair instead. The other common cause is size, since an image over 128 by 128 pixels is refused outright.
What is a hotspot?
It's the single pixel in your image that the browser treats as the pointer itself. Clicks land there, not at the middle of the picture and not at its top left unless you say so. The two numbers after the URL are its coordinates, measured from the top left of the image, and leaving them out means the browser assumes 0 0.
Should I use auto or default?
They're genuinely different. With auto the browser picks something sensible for the content, which means the text beam over a paragraph and an arrow elsewhere. With default you get the arrow everywhere, including over a paragraph somebody might want to select. Reach for auto unless you have a reason not to.
Does pointer belong on buttons?
This one has been argued about for twenty years. The original rule was that the hand means a link, so native buttons deliberately keep an arrow. In practice most design systems now put the hand on anything clickable and people expect it. Either is defensible, but pick one and apply it everywhere, because a mixture is worse than either choice.
Can I use an SVG as a cursor?
Yes, and every current browser supports it, though the SVG needs an explicit width and height rather than only a viewBox. It has to be a standalone file or a data URI, not an inline element from the page. Animated SVG cursors don't animate, so the first frame is what you get.
Why does a cursor look different on another machine?
Because the keyword values are drawn by the operating system, not by the browser. The pointing hand on Windows and the one on macOS are different shapes, and a Linux desktop uses whatever icon theme is installed. That's a feature rather than a bug, since people recognize their own pointer, and it's the reason a screenshot of a cursor gallery is worth so much less than hovering one yourself.
Do cursors work on touch screens?
No, and that matters more than it used to. There's no pointer to change on a phone, so every one of these values does nothing there. If a control leans on the cursor to say it's draggable or disabled, it needs a visible cue as well, or half your visitors never get the message.
If you're styling the rest of a control's states, the CSS button generator covers hover, focus and active together, and the CSS scrollbar styler handles the other piece of native chrome people want to customize. Both sit alongside a full set of free developer tools.