Skip to content
Free tool

CSS Cursor Viewer: test all cursor types live

The CSS Cursor Viewer shows all 36 values of the CSS cursor property, sorted by purpose and displayed using your system’s actual mouse pointer. Hover over not-allowed, for example, to see the circle with a slash, then copy cursor: not-allowed; with one click. Free, no sign-up required; everything runs in your browser.

Built by Justin Schuessler

Code ready? Take your site online with fast, reliable web hosting.

Take your site live

All cursor values by use case

Use case

36 of 36 values

The preview shows the cursor as rendered by your operating system and browser. Many cursors therefore look different on macOS, Windows, and Linux.

General3

  • auto

    The browser chooses automatically, e.g. a text cursor over text and an arrow beside it. This is the default.

    Move your mouse here
  • default

    The standard arrow, even over text. For areas that are not clickable.

    Move your mouse here
  • none

    Hides the mouse pointer, e.g. for full-screen videos, games, or a custom cursor.

    Move your mouse here

Links & Status5

  • pointer

    The pointing hand for links, buttons, and anything else clickable.

    Move your mouse here
  • help

    A question mark next to the arrow when help is available, e.g. for an info icon with a tooltip.

    Move your mouse here
  • context-menu

    Indicates that a context menu is available, e.g. for elements with their own right-click menu.

    Move your mouse here
  • progress

    Arrow with a loading icon: Something is loading in the background, but the page remains usable.

    Move your mouse here
  • wait

    Loading icon without an arrow: The interface is blocked until the operation is complete.

    Move your mouse here

Selection4

  • text

    The text cursor (I-beam) for input fields and selectable text.

    Move your mouse here
  • vertical-text

    The horizontal text cursor for vertically oriented text, e.g. with writing-mode: vertical-rl.

    Move your mouse here
  • cell

    A thick plus sign for selectable spreadsheet cells.

    Move your mouse here
  • crosshair

    Crosshairs for precision work, e.g. canvases, color pickers, or image cropping.

    Move your mouse here

Drag & Drop7

  • grab

    Open hand for draggable elements, e.g. maps, list items, or sliders.

    Move your mouse here
  • grabbing

    A closed hand while an element is being dragged.

    Move your mouse here
  • move

    Four-way arrow for elements you can move freely, e.g. windows or widgets.

    Move your mouse here
  • copy

    Arrow with a plus sign: Dropping creates a copy, e.g. when dragging files.

    Move your mouse here
  • alias

    Arrow with a shortcut icon: Dropping creates a link or shortcut.

    Move your mouse here
  • no-drop

    The dragged element cannot be dropped here, e.g. outside a drop zone.

    Move your mouse here
  • not-allowed

    A crossed-out circle for disabled buttons and actions that are currently unavailable.

    Move your mouse here

Resize14

  • col-resize

    Adjust column width, e.g. at dividers between table columns or split views.

    Move your mouse here
  • row-resize

    Adjust row height, e.g. at horizontal dividers between two areas.

    Move your mouse here
  • n-resize

    Drag the top edge to expand an element upward.

    Move your mouse here
  • e-resize

    Drag the right edge to expand an element to the right.

    Move your mouse here
  • s-resize

    Drag the bottom edge to expand an element downward.

    Move your mouse here
  • w-resize

    Drag the left edge to expand an element to the left.

    Move your mouse here
  • ne-resize

    Drag the top-right corner to change the width and height.

    Move your mouse here
  • nw-resize

    Drag the top-left corner to change the width and height.

    Move your mouse here
  • se-resize

    Drag the bottom-right corner to change the width and height.

    Move your mouse here
  • sw-resize

    Drag the bottom-left corner to change the width and height.

    Move your mouse here
  • ew-resize

    Resize horizontally in both directions, e.g. on a horizontal slider or splitter.

    Move your mouse here
  • ns-resize

    Resize vertically in both directions, e.g. on a vertical splitter.

    Move your mouse here
  • nesw-resize

    Drag diagonally from top right to bottom left, e.g. at the corner of a panel.

    Move your mouse here
  • nwse-resize

    Drag diagonally from top left to bottom right, e.g. using the handle at the bottom right of a panel.

    Move your mouse here

Scroll & Zoom3

  • all-scroll

    Arrows in all directions: You can scroll the content in any direction, e.g. a map.

    Move your mouse here
  • zoom-in

    Magnifying glass with a plus sign for images or maps you can click to enlarge.

    Move your mouse here
  • zoom-out

    Magnifying glass with a minus sign for clicking to zoom out of an enlarged image.

    Move your mouse here

Test area: Cursors in action

Hover over the examples, drag the card, divider, and panel corner, and click the image.

  • Button

    pointer

  • Disabled button

    not-allowed

  • Text link

    Read more in the Documentation.

    pointer

  • Input field

    text

  • Draggable card

    Card

    Drag to move

    grab
    grabbing

  • Resize columns

    Column A · 50 %
    Column B · 50 %
    col-resize

  • Drag panel corner

    Panel

    160 Ă— 80 px

    nwse-resize

  • Loading state

    Loading in the background

    You can keep working.

    Please wait

    This area is blocked.

    progress
    wait

  • Zoomable image

    zoom-in
    zoom-out

Overview

What is the CSS cursor property?

The CSS cursor property determines which mouse pointer appears when you hover over an element. It shows what you can do there: the hand for pointer means clickable, the text cursor means selectable, and the crossed-out circle for not-allowed means unavailable. If omitted, auto applies and the browser decides.

Syntax

One keyword per rule is enough. States like :disabled or :active get their own cursor:

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

.card[draggable="true"] {
  cursor: grab;
}

.card[draggable="true"]:active {
  cursor: grabbing;
}

Utility classes such as cursor-pointer in Tailwind CSS set the same declaration, cursor: pointer;. The tool itself copies plain CSS, not classes.

36 standard values

The CSS specification defines 36 keywords, from auto and pointer to the 14 resize cursors. This tool shows them all, grouped by use case.

Inherited

cursor applies to an element and all its children until a child sets its own value. So cursor: pointer on a container also affects the text inside it.

Drawn by the system

CSS only determines which cursor appears. Its appearance depends on the operating system and browser, so it looks different on macOS, Windows, and Linux.

No :hover needed

The cursor only appears while the mouse is over the element anyway. Set cursor directly on the element; you don’t need a separate :hover rule.

Cursor types

All 36 CSS cursor types at a glance

The tool sorts the values of the CSS cursor property into six groups by purpose. Use the purpose filter to show just one group.

General3

The default value auto, the normal arrow default, and none, which hides the mouse pointer.

autodefaultnone

Links & Status5

The hand for clickable elements, help, context menus, and the two loading states progress and wait.

pointerhelpcontext-menuprogresswait

Selection4

Horizontal and vertical text cursors, the plus sign for table cells, and the crosshair for precise work.

textvertical-textcellcrosshair

Drag & Drop7

Open and closed hands, the move cursor, and drop feedback: copy, link, no-drop and not-allowed.

grabgrabbingmovecopyaliasno-dropnot-allowed

Resize14

14 resize cursors for edges, corners, columns and rows, from n-resize to nwse-resize.

col-resizerow-resizen-resizee-resizes-resizew-resizene-resizenw-resizese-resizesw-resizeew-resizens-resizenesw-resizenwse-resize

Scroll & Zoom3

Scrolling in all directions, and the zoom-in and zoom-out magnifier cursors for images and maps.

all-scrollzoom-inzoom-out

Best practices

Which CSS cursor should you use when?

A cursor makes a promise to the user. These rules help you keep it.

pointer only for clickable elements

The hand promises that clicking will do something. Use it for links, buttons, and clickable cards, but not for text or areas with no action.

not-allowed for disabled states

A disabled button gets cursor: not-allowed. Note: With pointer-events: none, no cursor appears because the element does not receive mouse events.

grab and grabbing for dragging

Use grab for draggable elements. While dragging, switch to grabbing, for example via :active or a class set by your script.

text for inputs and text

Input fields already have a text cursor. Set text yourself only where content can actually be selected or edited.

progress instead of wait

Use progress when something loads in the background and the page remains usable. Use wait only when the interface is actually blocked.

Use none only with a replacement

An invisible mouse pointer is confusing. cursor: none is suitable for games, full-screen videos, or a custom cursor that replaces the system pointer.

How it works

How to find the right CSS cursor

Three steps, no account or installation required.

Step 1

Find a cursor

Search for a value, a use case such as resize or drag, or a state such as disabled—or filter by group.

Step 2

Try cursors

Hover over a tile’s preview area or interact with the examples in the test area to see your system’s actual cursor.

Step 3

Copy declaration

Click Copy to place just the declaration on your clipboard, e.g. cursor: not-allowed;. Paste it into your CSS rule.

Custom cursors

Set a custom cursor with url()

Instead of a keyword, you can use a custom image as your cursor. The image URL can be followed by optional hotspot coordinates—the point that clicks. Always end with a fallback keyword in case the image fails to load.

.canvas {
  cursor:
    url("/cursors/pencil.svg") 2 30,
    crosshair;
}

PNG or SVG work well. Browsers display custom cursors only up to 128 × 128 pixels; 32 × 32 is common. A cursor image should make the click point clear.

Discover more

More tools

HTML & CSS Formatter online (beautify your code)

Format, indent, and beautify HTML and CSS online with automatic language detection. Runs entirely in your browser, with no uploads.

Built by Luca Stanek

Convert SVG to PNG (SVG to PNG)

New

Convert SVG to PNG: Save vector graphics at any size with sharp detail as PNG, JPG, or WebP, with transparent backgrounds and presets for favicons, Discord emoji, and Minecraft server icons. Runs entirely in your browser.

Built by Luca Stanek

Color Picker

Convert colors between HEX, RGB, HSL, HSV, and CMYK in real time, find the closest CSS named color, and check WCAG contrast against black and white—all in your browser.

Built by Justin Schuessler

Contrast Checker

Calculate the WCAG contrast ratio between two colors live and check it against AA/AAA standards and UI components—all in your browser.

Built by Justin Schuessler

Color Scheme Generator

Generate complementary, analogous, triadic, and other color schemes live from a base color—nothing is stored or transmitted.

Built by Justin Schuessler

Favicon Generator

Generate a complete favicon set from any image—favicon.ico, Apple Touch icon, Android Chrome icons, site.webmanifest, and a ready-to-copy HTML snippet—all in your browser.

Built by Jakub Martyniak

FAQ

Frequently asked questions

Quick answers about the CSS cursor property and this tool.

36 keywords in six groups: General (auto, default, none), Links & Status (pointer, help, context-menu, progress, wait), Selection (text, vertical-text, cell, crosshair), Drag & Drop (grab, grabbing, move, copy, alias, no-drop, not-allowed), 14 resize cursors, and Scroll & Zoom (all-scroll, zoom-in, zoom-out). You can also use custom images with url().

Use pointer for anything that responds to a click: links, buttons, clickable cards or icons. Links already show the hand by default; buttons don’t in many browsers. Don’t use pointer on text or areas that do nothing. cursor: hand is an old, non-standard value from early versions of Internet Explorer, so it isn’t among the tool’s 36 values. Use cursor: pointer; for the hand.

Set cursor: auto on the element to let the browser decide, or cursor: default for the normal arrow. Because cursor is inherited, you can override a parent element’s pointer directly on the child. You’ll find both values in the tool’s General group.

cursor: not-allowed shows a circle with a slash through it. If you also set pointer-events: none on a disabled button, the cursor no longer appears because the element ignores the mouse. You can see a button with not-allowed in the test area.

grab shows an open hand over a draggable element; grabbing shows a closed hand while dragging. move shows a four-way arrow and suits elements you can move freely, such as windows or widgets.

progress shows an arrow with a loading indicator: something is loading in the background, but the page remains usable. wait shows only the loading indicator and means the interface is blocked. progress is suitable for most loading tasks on the web.

With cursor: url(cursor.svg) 2 30, crosshair;, you specify an image and optional hotspot, followed by a fallback keyword. Browsers support custom cursors up to 128 × 128 pixels. This tool shows the 36 standard values; you cannot upload custom images here.

CSS only specifies which cursor to show. Your operating system and browser draw it, so it looks different on macOS, Windows, and Linux. Touch devices have no mouse pointer: there, the tool shows a list with descriptions and copy buttons. Everything runs in your browser, with no uploads.

Any more questions?

Contact Support
Building a website?

Your website needs reliable hosting

A ZAP-Hosting VPS reliably gets your site online.

4.4/5 Trustpilot32,000+ Active serversSince 2010
View hosting

No setup. No risk. Online in seconds.

Flexible TermCancel anytimeOnline in 60 seconds

Looking for more tools? View all developer tools