cursor: pointerCSS pointer cursor
The default 'this is clickable' cursor — usually a hand. The single most common custom-cursor request on the web.
CSS Cursor Reference
Every CSS cursor keyword and pattern, with a runnable snippet and a “use this when” note. Bookmarkable for the next time you forget the difference between grab, move, and all-scroll.
cursor: handCSS hand cursor
The original Internet Explorer 'cursor: hand' value, deprecated in favor of cursor: pointer.
cursor: crosshairCSS crosshair cursor
A simple precision plus sign — perfect for image editors, color pickers, and aiming UIs.
cursor: textCSS text I-beam cursor
The vertical I-beam that signals text selection. Browsers apply it automatically inside text inputs and over selectable text.
cursor: grab / grabbingCSS grab and grabbing cursors
Open hand for draggable items at rest, closed fist while dragging. Required some browsers' -webkit- prefix until 2018.
cursor: moveCSS move cursor
A four-way arrow indicating that an element can be moved freely.
cursor: not-allowedCSS not-allowed cursor
A circle with a slash through it. The standard 'this control is disabled' affordance.
cursor: wait / progressCSS wait and progress cursors
Hourglass / spinner for blocking operations (wait) or background work (progress).
cursor: helpCSS help cursor
An arrow with a question mark — signals that hovering will show contextual help.
cursor: zoom-in / zoom-outCSS zoom-in and zoom-out cursors
A magnifying glass with a plus or minus. Indicates click-to-zoom on images or maps.
cursor: ns-resize, ew-resize, nesw-resize, nwse-resizeCSS resize cursors (n, e, s, w, ne, nw, se, sw)
Bidirectional arrows pointing in cardinal or diagonal directions. Used on resize handles.
cursor: col-resize / row-resizeCSS col-resize and row-resize cursors
Specialized resize arrows for table column and row dividers, with a distinct 'split' visual.
cursor: url('cursor.png') x y, fallbackCustom cursor with cursor: url()
Load any image (PNG, GIF, SVG, .cur) as the cursor with an explicit hotspot and a fallback.
cursor: url('.svg')SVG cursor with cursor: url('cursor.svg')
SVG cursors are sharp at every DPI and tiny over the wire. Add shape-rendering='crispEdges' for pixel art.
cursor: url('data:image/svg+xml;...')Inline cursor with data: URI
Inline an SVG cursor as a data URI to eliminate the first-hover load flash.
cursor: url('a.png') X YCSS cursor hotspot tuning
The two integers after the URL are the cursor's hotspot — the pixel that counts as the click point.
cursor: url(...), pointerCSS cursor fallback chain
Always provide a built-in cursor keyword after the custom URL so browsers, assistive tech, and old IE can fall back gracefully.
cursor: noneCSS cursor: none (hide the cursor)
Hide the cursor entirely. Used for fullscreen video players, immersive games, and kiosks.
cursor: url('animated.gif')Animated CSS cursors
Animated GIF cursors are technically supported but inconsistent across browsers; SVG with SMIL or .ani files via cursor: url work better in some engines.
:hover { cursor: ... }Changing the cursor on hover
Use a hover-state cursor to telegraph that an element is interactive only when actively hovered.
button { cursor: pointer }CSS cursor on button elements
By default, browsers do not apply pointer to <button> elements (Chrome and Firefox give them default). Add cursor: pointer to fix it.
a { cursor: pointer }CSS cursor on links
Anchor tags with a valid href get cursor: pointer for free; href-less <a> tags do not.
input { cursor: ... }CSS cursor on input elements
Text inputs default to cursor: text. Disabled inputs default to cursor: default. Override only when necessary.
img { cursor: zoom-in }CSS cursor on images
Images get cursor: default by browser. Add zoom-in for clickable galleries or pointer for clickable thumbnails.
canvas { cursor: crosshair }CSS cursor on a <canvas>
Canvas elements default to cursor: default. For drawing apps, set crosshair; for game canvases, set none.
[disabled] { cursor: not-allowed }CSS cursor on disabled controls
Browsers' default for disabled controls is cursor: default — which lies. Override globally.
image-rendering: pixelated; cursor: url(...)Pixel-art cursors with CSS
Browsers smooth small cursor images by default. Use a pre-rendered upscale or SVG with crispEdges to keep pixels crisp.
<svg shape-rendering='crispEdges'>Crisp pixel SVG cursors
Mark SVG cursors with shape-rendering='crispEdges' so browsers do not antialias the pixel grid.
cursor: url(a), url(b), pointerCSS cursor with multiple URL fallbacks
You can list multiple cursor URLs; the first one the browser supports is used.
cursor: url() in FirefoxCSS cursor in Firefox specifics
Firefox supports SVG, PNG, and GIF cursors but caps cursor images at 32x32 unless DPI scaling is in play.
cursor: url() in ChromiumCSS cursor in Chrome / Chromium
Chromium accepts cursors up to 128x128. Use larger images for HiDPI without aliasing.
cursor: url() in WebKitCSS cursor in Safari
Safari supports SVG cursors but historically had issues with URL-only fallback chains; always include a CSS keyword fallback.
@media (pointer: fine)CSS cursor on mobile and touch
Touch devices have no cursor. Wrap custom cursor rules in @media (pointer: fine) to skip the work on phones.
cursor: <keyword>All standard CSS system cursor keywords
Reference list of every system cursor keyword: default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text, alias, copy, move, no-drop, not-allowed, grab, grabbing, all-scroll, col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, nesw-resize, nwse-resize, zoom-in, zoom-out.
cursor-pointer, cursor-not-allowedTailwind CSS cursor classes
Tailwind ships utility classes for every CSS cursor keyword. Custom cursors require a small config extension.
style={{ cursor: 'url(...)...'}}Custom cursor in React (CSS approach)
In React, set cursor via inline style or CSS module. Custom cursor packs work identically to vanilla CSS.
:style with cursorCustom cursor in Vue 3
In Vue, bind cursor via :style or set it in a scoped style block. Same syntax as plain CSS.
style='cursor: ...'Plain HTML inline cursor styling
You can set cursor via the inline style attribute on any HTML element. Quick for prototyping; not recommended at scale.
button.gradient { cursor: url(...) ... }Custom cursor on a gradient CTA button
Pair a saturated gradient CTA with a glowing pixel cursor for maximum 'click here' affordance.
canvas { cursor: url(...) ... }Custom cursor on an HTML5 game canvas
Set the canvas cursor in CSS, not in canvas drawing calls. The OS-level cursor is faster than a canvas-rendered one.
About this reference
CSS exposes more than thirty system cursor keywords plus a url() form for custom cursors. This reference covers each one — what it looks like, when to use it, and the gotchas that make custom cursors silently break in Safari or fall back to auto in Firefox. Pages are short on purpose: open the one for the keyword you forgot, copy the snippet, close the tab.
For a full step-by-step on shipping a custom cursor on a real website, see the Adding a custom cursor to a website with pure CSS tutorial. For game-engine cursors, see the game dev hub.