CSS Cursor Types & Values — Free Interactive Cursor Property Viewer

CSS Cursor Types & Values — Free Interactive Cursor Property Viewer. Free CSS cursor viewer: hover over all 36 CSS cursor types to preview them, search and filter by category, click to copy the cursor property, and generate custom url() cursor CSS.

Our CSS cursor viewer shows every standard value of the cursor property in one interactive grid. Hover over a tile and your mouse pointer instantly changes to that cursor — no documentation tab, no code editor, no guessing.

All 36 CSS cursor types are included and grouped the way the CSS specification groups them: general (auto, default, none), links and status (pointer, help, wait, progress), selection (text, crosshair, cell), drag and drop (grab, grabbing, move, copy, not-allowed), resizing and scrolling (col-resize, ew-resize, nwse-resize …) and zooming (zoom-in, zoom-out).

Search by name or by what the cursor means — type "hand", "drag" or "resize" — and click any tile to copy a ready-to-paste declaration such as cursor: pointer;.

Each value comes with a plain-language description, so you can pick the right cursor css for buttons, links, disabled controls, draggable cards, resizable panels or image galleries.

The classic css cursor hand is pointer (the old hand keyword only ever worked in Internet Explorer), a disabled button should use not-allowed, and draggable items switch from grab to grabbing while the mouse is held down.

When the built-in keywords are not enough, the CSS custom cursor generator builds a cursor: url("image.png") x y, fallback; rule from any PNG, SVG, CUR or data-URI image, lets you set the hotspot coordinates, and previews the result live under your mouse.

Keep your custom image at 32×32 px (browsers reject cursors larger than 128×128) and always provide a keyword fallback. Everything runs locally in your browser: no sign-up, no upload and no tracking of the images you test.

Share a link that restores the selected cursor, your search and your custom cursor settings, or copy the CSS with one click. Building the rest of your stylesheet?

Shrink it with the CSS Minifier, convert sizes with the PX to REM Converter, pick colours with the Color Converter and HEX to RGBA Converter, or look up key codes for keyboard interactions with Keycode Info.

Frequently asked questions

How do I test and copy a CSS cursor value?

Hover over a tile to see that cursor; the name on the tile is the CSS value. Click the tile (or press Enter) to select it and copy its declaration, for example cursor: grab;. The Selected cursor panel shows a description, a test area and a Copy CSS button.

Which CSS cursor shows the hand pointer?

Use cursor: pointer; for links and clickable elements; it shows the hand. Use grab and grabbing for draggable items, not-allowed for disabled controls, text for the I-beam, and wait or progress for busy states.

How do I find a cursor type quickly?

Type in the search box to filter by name or description, for example drag, resize or zoom, or use the category buttons: General, Links & status, Selection, Drag & drop, Resize & scroll and Zoom. The counter shows how many of the 36 cursors match.

How do I create a custom cursor with an image?

In Custom cursor CSS generator, paste an image URL or data URI (PNG, SVG or CUR), optionally set Hotspot X and Hotspot Y in pixels (0 to 127) and pick a Fallback cursor. The tool builds a rule like cursor: url("cursor.png") 16 16, pointer; that you can test in the preview area and copy.

Why is my custom cursor image not showing?

Browsers ignore cursor images larger than 128 by 128 pixels, so 32 by 32 is the safest size. The image URL must also load from the page where you use it. When the image cannot be used, the fallback keyword is shown instead.

Why do some cursors look the same or different on my computer?

Cursor keywords are drawn by your operating system, so the same value can look different on Windows, macOS and Linux, and some systems reuse one image for several values. Touch devices do not show a mouse cursor at all.

How to use this online tool

CSS Cursor Types & Values — Free Interactive Cursor Property Viewer is designed for fast browser workflows when you need to format, validate, convert, decode, encode, generate, or inspect data without opening a heavy desktop app. Start with the input field or visible options, review the result, then copy or download the output for the next step.

Private processing in your browser

CSS Cursor Types & Values — Free Interactive Cursor Property Viewer keeps the normal processing step local in your browser. That is useful for code snippets, tokens, documents, configuration values, text samples, and other material that should not be sent to a remote service unless you explicitly choose to share it.

When this tool is useful

Use CSS Cursor Types & Values — Free Interactive Cursor Property Viewer for repeatable developer tasks, technical documentation, QA checks, quick conversions, debugging, content cleanup, and internal team workflows. The page focuses on clear inputs, immediate feedback, and output that is easy to reuse in code, reports, tickets, emails, or notes.

Practical tips

Before copying the final result, check important details such as spacing, casing, filenames, encoding, token structure, line breaks, or output format. Small checks prevent mistakes when the result is reused in source code, API requests, documentation, spreadsheets, or shared files.