CruxDevCruxDev Tools Prompts
css Utility • Zero-Server Privacy • 100% Client-Side

CSS Cursor Playground

Preview all 38 CSS cursor types on a live canvas — test custom cursor images, hotspot coordinates, and fallback stacks.

Overview

A playground for the CSS cursor property with 28 keywords, from the everyday pointer and text to grab, not-allowed, col-resize and zoom-in. Click any keyword to apply it to a large hover area, feel the cursor change under your pointer, and click the code line to copy the one-line declaration.

How It Works

Click any of the 28 keyword buttons to select it; the button itself already renders with that cursor, so some are testable before you click. Move your pointer over the dashed hover area to feel the selected cursor at full size. The code panel shows cursor: keyword; for the current selection, and clicking that line copies it to the clipboard. There are no sliders or colors; the entire tool is keyword selection, live feel and copy.

Step-by-Step Usage Guide

  1. Click a keyword button to select it.
  2. Hover the dashed test area to feel the cursor.
  3. Click the code line to copy cursor: keyword;.
  4. Paste it onto the relevant selector.

Technical Specifications & Standards

The keyword list spans three generations of the spec. CSS 2.1 defined the core set, default, pointer, text, wait, move and the directional resize keywords; CSS UI additions brought grab, grabbing, zoom-in and zoom-out, plus the state keywords not-allowed, no-drop and progress. A few distinctions are worth knowing because pages get them wrong constantly: progress means the app is working but the user can still interact, while wait blocks interaction entirely; alias signals a link leaving the current origin, and copy signals a copy rather than a move during drag operations. The tool covers keywords only; the full property also accepts url() values with fallback keywords and hotspot coordinates for custom images, which this interface does not emit. On touch devices cursors are moot, so none of these choices affect mobile UX.

Targeted Use Cases

  • Setting pointer on clickable cards that are not links.
  • Showing grab and grabbing during drag-and-drop interactions.
  • Using not-allowed on disabled controls instead of relying on color alone.
  • Zoom-in on image thumbnails that open a lightbox.

Notes & Gotchas

  • Use progress rather than wait whenever the interface stays interactive during loading.
  • Pair not-allowed with the disabled attribute so assistive tech agrees with the cursor.
  • Apply grab on hover and grabbing while dragging for a tactile drag-and-drop feel.
  • Do not override cursor on body text; leave text and default to the browser where users expect them.

Frequently Asked Questions

What is the difference between wait and progress?

wait signals that the user should not interact because the interface is blocked, while progress signals background work with the interface still usable. Long operations should almost always show progress, not wait.

Can I use a custom image as the cursor?

The full property supports url() with a fallback keyword and hotspot coordinates, but this tool covers the 28 keywords only. Write the url() form by hand if you need a custom image.

Which keywords do older browsers lack?

The CSS 2.1 set is universal. grab, grabbing, zoom-in and zoom-out date from later UI specifications, and very old mobile or embedded browsers may ignore them, falling back to the default arrow.

How do I test a cursor before selecting it?

The keyword buttons themselves render with their own cursor value, so hovering the buttons previews many of them. The large dashed area then confirms the exact selection at full size.