Cursor Types: All 36 CSS Cursors, Live on Your Screen

CSS defines exactly 36 cursor keywords — the same 36 on every computer on Earth. But the spec only names them; the pictures belong to your operating system. Hover the tiles below and every cursor you see is your machine drawing its own version — which is why this page looks different on Windows, on a Mac, and on Linux, and why on a phone it can show you nothing at all.

Where the number 36 comes from

The keyword list lives in the W3C's CSS Basic User Interface Module Level 3, which reached full Recommendation status in June 2018 after more than a decade of drafts. It sorts the 36 values into the six groups you see in the playground — general, links and status, selection, drag and drop, resizing and scrolling, and zooming — and fifteen of the 36 are resize arrows alone, one for each edge, corner and axis of a window.

The list was not born whole. grab and grabbing started life as the proprietary -webkit-grab, invented for the pan-a-map interaction Google Maps made famous; Firefox shipped them unprefixed in version 27 (early 2014) and Chrome only caught up in version 68 (mid-2018). And there is effectively a 37th value: cursor: url(), which replaces the keyword with any image you supply — the escape hatch the designer below is built on.

Same keyword, different pixels

Ask three machines for cursor: wait and you get three answers: Windows drew an hourglass for two decades until Vista swapped in the spinning blue ring in 2007; the original 1984 Macintosh drew a tiny wristwatch, which modern macOS long ago traded for the rainbow "beach ball"; Linux draws whatever the installed cursor theme says — Adwaita on GNOME, Breeze on KDE. The CSS keyword is a request, not a picture.

Even the plain arrow has a story. Doug Engelbart's original pointer, demoed in 1968, pointed straight up; when Xerox PARC built the first bitmapped GUIs in the 1970s the arrow was tilted to roughly 45 degrees because a slanted edge rendered more cleanly on the low-resolution displays of the day — and every OS since has kept the lean. The I-beam is thin for an equally practical reason: it has to sit between two characters without covering either one.

Your phone cannot show any of these

A touch screen has no hover and no persistent pointer, so on an iPhone or an Android phone every value on this page renders as nothing — your finger is the cursor. The one modern exception is the iPad: with trackpad support in iPadOS 13.4 (released 18 March 2020), Apple introduced an adaptive pointer, a small circle that morphs into the button or text beam beneath it — deliberately not the desktop arrow. Android will show a conventional pointer only if you physically attach a mouse.

The practical consequence for web work: anything you signal only with cursor: pointer or a hover state is invisible to most of your traffic. The matching CSS media queries — (hover: none) and (pointer: coarse) — exist precisely so you can detect a cursor-less visitor and give them a visible affordance instead. This page uses the same query to decide whether to tell you to hover or to tap.

Custom cursors: the url() escape hatch

The full syntax is cursor: url("cursor.png") 4 2, auto — the two numbers are the hotspot, the exact pixel inside the image that registers the click, and the trailing keyword is a mandatory fallback for when the image fails to load. Windows' native formats (.cur and animated .ani) bake the hotspot into the file; PNG cursors declare it in the CSS instead, which is what the designer below generates.

Browsers police the size. Firefox flatly ignores cursor images larger than 128 × 128 pixels, and Chrome clamps where oversized cursors may render near the edge of the viewport — a defence added after scam pages used giant custom cursors to paint fake buttons under the user's real click point. Size is also the one thing the 36 keywords can never control: a keyword cursor is drawn at whatever size the visitor's OS says (Windows exposes a 1–15 pointer-size slider under its Accessibility settings; macOS has a pointer-size slider of its own), while a url() cursor is exactly as big as the image you supply. The size buttons in the designer below let you feel the difference — including a 144 px option Firefox refuses to wear.

Thirty-six cursors, standardized down to the letter — and not one of them looks the same on any two machines. The spec owns the words; your computer owns the pictures; and a billion phones prove the whole system optional.