What Is the CSS Cursor Gallery?
Browse and preview all built-in CSS cursor values in one interactive gallery. See how each cursor looks on your operating system.
Why Use This Tool?
CSS has 36 cursor keywords, but most developers only use 'pointer' and 'default'. This gallery shows every available cursor with live previews, so you can choose the right cursor for each interaction type.
How to Use This CSS Cursor Gallery
- Browse the cursor gallery — Scroll through all available CSS cursor types, organized by category: general, links and status, selection, drag and drop, resize, and zoom.
- Hover to preview — Move your mouse over any cursor card to see how that cursor looks in real time.
- Click to copy — Click any cursor card to copy the CSS
cursor property declaration to your clipboard.
- Use in your stylesheets — Paste the cursor value into your CSS to apply it to any element — buttons, links, draggable items, or custom interactive areas.
Which cursor for which interaction
The gallery above shows all 36 predefined cursor keywords in CSS Basic User Interface Level 4. These are the ones most interfaces need, with the meaning the specification gives each one:
| Interaction | Keyword | Meaning in the spec |
|---|
| Link or button | pointer | Indicates a link |
| Text the user can select | text | Text can be selected |
| Busy, page still usable | progress | Program is busy, but the user can still interact |
| Busy, page blocked | wait | Program is busy; the user should wait |
| Disabled action | not-allowed | The requested action will not be carried out |
| Item that can be dragged / is being dragged | grab / grabbing | Something can be grabbed / is being grabbed |
| Column or row divider | col-resize / row-resize | Item may be resized horizontally / vertically |
| Image you can enlarge or reduce | zoom-in / zoom-out | Something can be zoomed in / out |
| Drop creates a copy or a shortcut | copy / alias | Something is to be copied / an alias created |
Worked example: a custom cursor with a hotspot. For a drawing canvas, cursor: url(pen.svg) 2 30, crosshair; uses a 32×32 pen image whose tip sits 2 px from the left and 30 px from the top. Those two numbers are the hotspot, the exact pixel that clicks land on. Without them the hotspot defaults to the image's top-left corner and every click lands 30 px away from the pen tip. The keyword after the comma is required as the final fallback and is used if the image fails to load or is too large. Firefox and Chromium ignore cursor images larger than 128×128 px, and MDN recommends 32×32.
Sources, checked October 11, 2026: W3C, CSS Basic User Interface Module Level 4, the cursor property; MDN, cursor (icon size limits).
Frequently Asked Questions
How many CSS cursor values are there?
36 keywords: auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text, alias, copy, move, no-drop, not-allowed, grab, grabbing, all-scroll, the 14 resize cursors (col-resize, row-resize, the eight compass directions n, e, s, w, ne, nw, se, sw, plus ew, ns, nesw and nwse), zoom-in and zoom-out. That is the list on MDN's cursor reference, and this gallery shows all 36. You can also point cursor at an image with url().
Can I use custom cursor images?
Yes. Write cursor: url('custom.png') 12 12, auto; where 12 12 is the hotspot (the pixel that clicks) and auto is the required fallback keyword. PNG, SVG and the Windows .cur format are common choices. Browsers ignore cursor images above 128×128 px, and 32×32 is the safe size across systems.
Do cursors look the same across operating systems?
No. The keyword names are standard, but each operating system and browser draws its own cursor images, so the same value can look different on Windows, macOS and Linux, and a few values fall back to the default arrow on some systems. Hover the cards here to see how your own system draws each one.
What is the difference between pointer and default cursor?+
The default cursor is the standard arrow shown on most of the page. The pointer cursor (the pointing hand) indicates a clickable element like a link or button. Using pointer on non-clickable elements misleads users into thinking they can interact with something.
Should I change the cursor on a non-interactive element?+
No. Setting cursor: pointer on a static heading or paragraph implies clickability that is not there and frustrates users who click expecting something to happen. The cursor is part of the affordance language of the page — pointer means 'this is a link or button,' text means 'you can select this,' and so on. Reserve cursor overrides for elements that actually behave like the implied affordance.
What is the difference between grab and grabbing?+
grab is the open hand that says an item can be dragged; grabbing is the closed hand shown while it is being dragged. Switch from grab to grabbing on mousedown or pointerdown and back on release, so the cursor follows the state of the drag.
When should I use not-allowed versus no-drop?+
not-allowed marks an action that cannot happen at all, such as hovering a disabled button. no-drop is narrower: during a drag, it tells the user the item cannot be dropped on the spot under the pointer. Many systems draw both with the same circle-and-slash icon.
Do cursors matter on phones and tablets?+
No. Touchscreens have no pointer arrow, so the cursor property has no visible effect there. It still matters on devices with a mouse or trackpad, including tablets with one attached, so keep it correct but never rely on it as the only cue.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service