CSS Cursor Viewer
The CSS cursor property is one of the simplest ways to communicate intent to your users.
A well-chosen cursor tells people whether an element is clickable, draggable, resizable, or disabled - all before
they've even interacted with it. Despite being easy to overlook, cursor design is a fundamental layer of
interface affordance: the visual signal that an action is possible here. Used thoughtfully, it
reduces cognitive load, improves discoverability, and makes your interfaces feel polished and professional.
This reference covers all 30 standard keyword values defined in the CSS UI specification, organised by use-case. Each card lets you preview the cursor directly in your browser without any extra tooling - just hover the dashed zone to see it live. When you find the one you need, click copy CSS to grab the ready-to-paste property declaration.
CSS Cursor Viewer
About CSS Cursors
The CSS cursor property specifies the shape of the mouse pointer when it rests over an element. It is defined as part of the CSS Basic User Interface Module Level 4 and has been broadly supported across all major browsers since the early 2000s. Today, every value in this reference is supported in Chrome, Firefox, Safari, and Edge without vendor prefixes or polyfills.
Beyond the keyword values shown here, the cursor property also supports custom cursor images
via the url() function, letting you reference a .cur, .png, or .svg file.
You can define multiple fallback URLs and terminate the list with a keyword value as a guaranteed fallback -
for example: cursor: url(my-cursor.png) 4 4, pointer;. The two numbers after the URL specify the
cursor's hotspot: the x and y offset within the image that registers as the active click point.
Syntax & Inheritance
The cursor property is inherited, meaning child elements automatically
receive their parent's cursor unless overridden. This makes it efficient to set a cursor on a container
and have it apply throughout. The value auto is the initial value,
instructing the browser to choose the best cursor for the element - typically resolving to
text over text nodes and default elsewhere.
Multiple values can be chained in a comma-separated list. The browser uses the first value it can render and falls back down the list. Always end a custom cursor list with a keyword value to guarantee a cursor is shown even when the image fails to load.
Accessibility Considerations
Cursor choice directly affects usability and accessibility. Overriding a cursor unexpectedly - for example, setting cursor: default on a link - removes a standard affordance that users, especially those relying on mouse interaction, depend on to understand the interface. Always pair visible cursor feedback with other accessible signals such as ARIA roles and keyboard focus styles.
Use cursor: not-allowed alongside a disabled attribute
rather than simply removing pointer events - the cursor change provides a visual cue even when
the element cannot be clicked. Avoid hiding the cursor with cursor: none
unless you are providing a fully visible custom cursor replacement for all users.
Performance & Best Practices
Keyword cursor values are zero-cost - they involve no network requests and no layout or paint work. Custom cursor images, however, should be kept small (typically under 128×128px) and in an appropriate format. PNG is the safest choice for cross-browser compatibility; SVG cursors have growing support but may fall back inconsistently across operating systems.
Avoid animating cursor images using CSS animations - browsers do not support animated custom
cursors via CSS alone. If you need a dynamic cursor effect, update the cursor style
via JavaScript in response to user events, swapping between pre-loaded image URLs as needed.
Browser & OS Rendering
Cursor rendering is delegated to the operating system, which means the same keyword value can appear quite different across Windows, macOS, and Linux. The wait cursor shows a spinning wheel on macOS and an animated ring on Windows. The pointer cursor is a hand on most platforms but can vary in style and colour based on the active OS theme.
High-DPI ("Retina") displays require custom cursor images at 2× resolution. Specify hotspot
coordinates in CSS pixels (not device pixels) so the cursor registers correctly on both standard
and high-DPI screens. Use image-set() to serve resolution-appropriate cursor images
where it is supported.
Frequently Asked Questions
What is the CSS cursor property and what does it do?
The CSS cursor property controls the appearance of the mouse pointer when it hovers over an HTML element. It accepts keyword values (like pointer, move, not-allowed) or custom image URLs. The property is inherited, so setting it on a parent element applies it to all children unless overridden.
Basic usage: cursor: pointer; - this changes the cursor to a hand icon, signalling a clickable element. It is part of the CSS Basic User Interface Module Level 4 specification.
How many CSS cursor keyword values are there?
There are 30 standard keyword values for the CSS cursor property, as defined by the W3C CSS UI specification. These cover general-purpose cursors, text selection, resize handles, drag-and-drop states, zoom, scroll, and status indicators. All 30 are viewable and previewable on this page.
Which cursor value should I use for a clickable button or link?
Use cursor: pointer; for clickable elements such as buttons, links, and interactive cards. This renders a pointing hand icon and is universally understood to mean "you can click here." Browsers automatically apply this to <a> tags with valid href attributes, but you'll need to set it explicitly on buttons and custom interactive elements for consistent behaviour.
How do I use a custom image as a cursor in CSS?
Use the url() function followed by a fallback keyword: cursor: url('my-cursor.png') 0 0, default;. The two numbers after the URL define the hotspot - the x and y offset within the image that acts as the actual click point. Always include a keyword fallback so a cursor is always visible if the image fails to load.
Supported formats include .png, .cur, .svg (in most modern browsers), and .gif (static only in most browsers). Keep images small - the recommended maximum size is 128×128 pixels, though 32×32 is the most broadly compatible size across operating systems.
What is the difference between cursor: auto and cursor: default?
cursor: auto (the initial value) instructs the browser to choose the most appropriate cursor based on the element and its context - it will show a text cursor over selectable text, a pointer over links, and a default arrow elsewhere.
cursor: default always shows the platform's default arrow cursor, regardless of context. Use default when you want to explicitly suppress the browser's automatic cursor changes - for example, on a custom interactive element that should not show a text cursor when the user hovers over text labels inside it.How do I show a disabled cursor on an element?
Use cursor: not-allowed;. This displays a circle-with-a-line icon that communicates the action cannot be performed. For disabled form elements, always combine this with the HTML disabled attribute rather than relying on the cursor alone - the cursor is a visual hint, not a functional restriction.
Note that pointer-events: none will prevent mouse events but will also suppress the custom cursor, so prefer not-allowed when you want users to see the disabled state clearly.
Can I animate or change the cursor dynamically with JavaScript?
Yes. You can update the cursor style via JavaScript by setting element.style.cursor = 'grabbing', or by toggling CSS classes. This is commonly used for drag-and-drop interactions: set cursor: grab on a draggable element at rest, and switch to cursor: grabbing on mousedown or dragstart. You can also update a custom cursor image URL via JavaScript to create animated or state-reactive custom cursors.
Does cursor: none hide the cursor completely?
Yes - cursor: none renders no cursor at all over the element. This is used in applications that implement fully custom cursor experiences (e.g. canvas-based games or creative web experiences where a custom SVG element follows the mouse position via JavaScript).
If you use cursor: none, you are responsible for providing a visible alternative indicator so users always know where their pointer is - removing it without a replacement is a significant accessibility and usability concern.
Are all cursor values supported in all browsers?
All 30 standard keyword values in this reference have broad support across modern browsers - Chrome, Firefox, Safari, and Edge - without vendor prefixes. Older browsers (particularly Internet Explorer) had incomplete support for some values like zoom-in and zoom-out, but these concerns are largely historical for modern development.
Custom cursor image support is also universal in modern browsers, though SVG cursor rendering can vary slightly across operating systems rather than browsers specifically.
What is the correct full CSS syntax for the cursor property?
The full formal syntax is: cursor: [<url> [<x> <y>]?,]* [ auto | default | ... ].
In practice, keyword-only usage: cursor: pointer;. With a custom image and fallback: cursor: url('hand.png') 2 2, pointer;. Multiple custom image fallbacks: cursor: url('hand.svg'), url('hand.png') 2 2, pointer;. The keyword at the end is mandatory when using URL values and must be a standard CSS cursor keyword - not another URL.
