CSS Cursor Viewer

Preview all 35 CSS cursor values on hover. Click any cursor to copy the CSS snippet.

CSS Cursor Reference

36 of 36 cursors

How to Use

.element { cursor: pointer; }

Hover over any cursor cell to see the effect live, then click to copy the CSS declaration.

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Cursor Viewer?

Preview all CSS cursor values in one place. Click any cursor name to copy the cursor property value.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Cursor Viewer

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Browse cursor types

All 25 standard CSS cursor values are shown with live previews. Hover over each to see how it looks.

Click to copy

Click any cursor preview to copy the CSS cursor declaration.

Apply to your element

Paste the cursor property into your element's CSS rule.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

cursors.css

/* Common cursor values */
.clickable     { cursor: pointer; }
.not-allowed   { cursor: not-allowed; }
.text-input    { cursor: text; }
.draggable     { cursor: grab; }
.dragging      { cursor: grabbing; }
.resize-h      { cursor: ew-resize; }
.resize-v      { cursor: ns-resize; }
.crosshair     { cursor: crosshair; }
.zoom-in       { cursor: zoom-in; }
.zoom-out      { cursor: zoom-out; }
.wait          { cursor: wait; }
.help          { cursor: help; }

/* Custom cursor with fallback */
.custom {
  cursor: url('/cursor.png'), pointer;
}

Pro tips

Pro tips for better results

★

Use cursor: pointer only for interactive elements

cursor: pointer signals interactivity. Applying it to non-clickable elements trains users to expect a click action that does not happen. Reserve it for links, buttons, and other clickable elements.

★

cursor: not-allowed does not disable interaction

cursor: not-allowed changes the visual cursor but does not prevent click events. To actually disable interaction, add pointer-events: none (which also removes the cursor). Use both together: cursor: not-allowed; pointer-events: none.

FAQ

Frequently asked questions

Use cursor: url("/path/to/cursor.png"), fallback. Always include a fallback keyword (pointer, default, etc.) because the URL may fail to load. Custom cursor images should be 32x32px max for consistent rendering.

The cursor property itself cannot be animated with CSS transitions. You can switch between cursor values on :hover and :active, but there is no interpolation between cursor states.