How many CSS cursor values are there?

The CSS specification defines 38 standard cursor values across 6 categories: general (auto, default, none), links and status (pointer, progress, wait, context-menu, help), selection (crosshair, cell, text, vertical-text), drag-and-drop (alias, copy, move, no-drop, not-allowed, grab, grabbing), resize (16 directional variants), and zoom (zoom-in, zoom-out).

What is the difference between cursor: grab and cursor: grabbing?

cursor: grab shows an open hand indicating an element can be dragged. cursor: grabbing shows a closed hand indicating an element is currently being dragged. Switch between them using JavaScript — apply grab on mouseenter and grabbing on mousedown.

When should I use cursor: not-allowed vs cursor: no-drop?

cursor: not-allowed indicates the requested action cannot be performed — use it on disabled buttons and form fields. cursor: no-drop indicates a dragged item cannot be dropped at the current location — use it on invalid drop targets during drag-and-drop.

Can I use a custom cursor image in CSS?

Yes. The CSS cursor property accepts a url() value for custom cursor images: cursor: url(my-cursor.png) 0 0, auto. The two numbers are the hotspot coordinates. Always provide a fallback cursor value after the url() in case the image fails to load.

CSS Cursor Tester

Preview all 38 standard CSS cursor styles online for free with our css cursor tester. Hover over any cursor card to see it in action, filter by category, search by name, and click to copy the CSS declaration instantly. No signup required.

CSS Cursor Tester

Preview all 36 standard CSS cursor styles by hovering over each card. Click any card to copy the cursor: CSS declaration to your clipboard. Filter by category or search by name.

36 cursors total — hover to preview, click to copy

Usage in CSS:

.button{ cursor: pointer; }

.loading{ cursor: wait; }

.draggable{ cursor: grab; }

.disabled{ cursor: not-allowed; }

.resizable{ cursor: ew-resize; }

.zoomable{ cursor: zoom-in; }

Why Use Our CSS Cursor Tester?

Fast, accurate CSS cursor preview and reference online

Instant CSS Cursor Preview

Preview all 38 standard CSS cursor styles by hovering over each card in the css cursor tester. The cursor changes instantly on hover — no clicking, no waiting, no guessing what each cursor looks like on your platform.

Secure CSS Cursor Tester Online

The css cursor tester runs entirely in your browser with no data collection, no tracking, and no server requests. It's a pure client-side reference tool — your browsing is completely private.

CSS Cursor Tester - No Installation

Use the css cursor tester directly in any modern browser with no downloads, plugins, or extensions required. The cursors render using your operating system's native cursor set, so you see exactly what your users will see.

100% Free with One-Click Copy

The css cursor tester is completely free with no signup, no usage limits, and no ads. Click any cursor card to copy the ready-to-use CSS declaration to your clipboard instantly.

Common Use Cases for CSS Cursor Tester

Practical applications for previewing and choosing CSS cursor styles online

Choosing the Right Cursor for UI Elements

Use the css cursor tester to find the correct cursor for buttons, links, draggable elements, and disabled controls. Hover over each cursor in the tester to see exactly how it looks before adding it to your stylesheet.

Drag-and-Drop Interface Design

Drag-and-drop UIs require precise cursor feedback — grab when hovering, grabbing when dragging, no-drop when over invalid targets. The css cursor tester lets you preview all drag-related cursors side by side.

Resizable Panel and Splitter Components

Resizable panels need directional resize cursors (ew-resize, ns-resize, col-resize, row-resize). Use the css cursor tester to preview all resize variants and pick the correct one for each resize handle direction.

Accessibility and UX Feedback

Correct cursor feedback is an accessibility requirement — users rely on cursor changes to understand what is interactive. The css cursor tester helps you verify that disabled elements use not-allowed and loading states use wait or progress.

Cross-Platform Cursor Verification

CSS cursors render differently on Windows, macOS, and Linux. Use the css cursor tester on each platform to verify that your chosen cursor looks correct for your target audience before shipping.

Code Review and Documentation

When reviewing CSS code or writing component documentation, use the css cursor tester as a quick reference to verify that cursor values are correct and appropriate for the described interaction.

Understanding CSS Cursor Styles

Learn how CSS cursor values work and when to use each one

What is the CSS cursor Property?

The CSS cursor property sets the mouse cursor shape that appears when the user hovers over an element. It is one of the most important UX signals in web interfaces — the cursor communicates to users what will happen when they interact with an element. The CSS specification defines 38 standard cursor values organised into categories: general cursors, link and status indicators, selection cursors, drag-and-drop cursors, resize cursors, and zoom cursors. Our css cursor testerlets you preview all of them using your operating system's native cursor rendering, so you see exactly what your users will see on their platform.

How Our CSS Cursor Tester Works

Browse or Search:Use the category tabs to filter cursors by type (General, Links & Status, Selection, Drag & Drop, Resize, Zoom), or type a cursor name or description in the search box. The css cursor tester updates the grid instantly.
Hover to Preview:Move your mouse over any cursor card to see the cursor change in real time. The info bar at the bottom shows the cursor name, CSS declaration, and description. The css cursor tester uses your browser's native cursor rendering — no images or SVGs are used.
Click to Copy: Click any cursor card to copy the complete CSS declaration (e.g., cursor: pointer;) to your clipboard. Paste it directly into your stylesheet. The card shows a "Copied!" confirmation for 1.5 seconds.

CSS Cursor Categories Explained

General: auto (browser decides), default (platform arrow), and none (hidden cursor). Use auto for most elements and override only where needed.
Links & Status: pointer for clickable elements, wait for blocking operations, progress for background operations, help for tooltip triggers, and context-menu for right-click targets.
Drag & Drop: grab and grabbing for draggable elements, move for movable items, copy for copy operations, alias for shortcuts, no-drop and not-allowed for invalid targets and disabled actions.
Resize: Directional resize cursors for all 8 compass directions (n, s, e, w, ne, nw, se, sw) plus bidirectional variants (ew-resize, ns-resize, nesw-resize, nwse-resize) and col-resize, row-resize, and all-scroll for table and panel resizing.

Browser Support and Platform Differences

All 38 CSS cursor values in the css cursor tester are supported in Chrome, Firefox, Safari, Edge, and Opera. The visual appearance of each cursor varies by operating system — Windows uses Aero cursors, macOS uses its own cursor set, and Linux uses the X11 cursor theme. This is intentional: the browser delegates cursor rendering to the OS so cursors feel native to the user's platform. The none cursor hides the cursor entirely — use it carefully and only when you provide a custom cursor via JavaScript, as hiding the cursor without a replacement is an accessibility issue.

Related Tools

QR Code Generator

Generate scannable QR codes for URLs, WiFi, vCards, and plain text — download as SVG or PNG. Free online QR code generator.

Open Graph Image Generator

Create social preview (OG image) banners at 1200×630px with custom text, colors, and layouts — Free online OG image generator.

Favicon Generator from Text

Generate a favicon PNG or SVG from initials, a single letter, or any emoji — no image upload required. Download all standard sizes (16px to 512px) — Free online favicon generator from text.

ASCII Art Generator

Convert text into large stylized ASCII art using FIGlet-style fonts — 6 font styles, 4 character sets, custom width, copy or download as .txt - Free online ASCII art generator

Frequently Asked Questions About CSS Cursor Tester

Common questions about CSS cursor styles and the cursor property

A css cursor tester is a browser-based tool that lets you preview all standard CSS cursor styles by hovering over each cursor card. Our css cursor tester covers all 38 CSS cursor values with category filtering, search, and one-click copy of the CSS declaration. No signup required.

The CSS specification defines 38 standard cursor values: 3 general cursors (auto, default, none), 6 link and status cursors (pointer, progress, wait, context-menu, help, crosshair), 4 selection cursors (crosshair, cell, text, vertical-text), 7 drag-and-drop cursors (alias, copy, move, no-drop, not-allowed, grab, grabbing), 16 resize cursors, and 2 zoom cursors (zoom-in, zoom-out).

Yes — the css cursor tester is 100% free with no signup, no account, and no usage limits. Preview and copy as many cursor styles as you need, completely free forever.

CSS cursors are rendered by your operating system, not the browser. Windows, macOS, and Linux each have their own cursor themes, so the same cursor value looks different on each platform. The css cursor tester shows you the cursor exactly as your users on the same OS will see it.

cursor: wait indicates that the program is busy and the user cannot interact with the page — typically shown as a spinning wheel or hourglass. cursor: progress indicates that the program is busy in the background but the user can still interact with the page. Use wait for blocking operations and progress for non-blocking background tasks.

cursor: grab shows an open hand and indicates that an element can be dragged. cursor: grabbing shows a closed hand and indicates that an element is currently being dragged. You should switch between these two cursors using JavaScript — apply grab on mouseenter and grabbing on mousedown, then revert on mouseup.

cursor: not-allowed indicates that the requested action cannot be performed — use it on disabled buttons, form fields, and links. cursor: no-drop indicates that a dragged item cannot be dropped at the current location — use it on invalid drop targets during a drag-and-drop operation.

Yes. The CSS cursor property accepts a url() value for custom cursor images: cursor: url(my-cursor.png) 0 0, auto. The two numbers after the URL are the hotspot coordinates (x, y) — the pixel within the image that acts as the click point. Always provide a fallback cursor value (like auto or pointer) after the url() in case the image fails to load.