Skip to content
Convertto

CSS Cursor Styles — Every Value, Live

Hover to try every CSS cursor keyword, and copy the one you want.

CSS has 36 cursor keywords and the browser draws each one from the operating system, so they look native rather than like an image you shipped. The ones worth knowing: pointer for anything clickable, not-allowed for a disabled control, grab and grabbing for draggable items, col-resize and row-resize for table and panel dividers, and progress for "still working, but you can carry on". Hover the preview to see the real cursor for the value you picked.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Should a button use cursor: pointer?

A real <button> shows the default arrow in browsers, matching native OS buttons, and some designers keep that. In practice most of the web uses pointer for anything clickable and users now expect it, so pointer is the safer choice for recognisability — just apply it consistently.

What is the difference between wait and progress?

wait means the interface is blocked and nothing you do will register. progress means something is happening in the background but the page is still usable. Using wait for a background task tells people to stop trying, which is usually wrong.

Can I use my own image as a cursor?

Yes — cursor: url(cursor.png) 4 4, auto. Always supply the hotspot coordinates and a keyword fallback, because a browser that cannot load the image or considers it too large falls back to the keyword.

How to use the css cursor reference & generator

  1. 1Choose the cursor.
  2. 2The result appears immediately — copy or download it.

Embed this tool

Put the working css cursor reference & generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Hover Effect GeneratorGenerate a hover effect that animates cleanly, with the reduced-motion guard included.CSS Scrollbar StylerStyle a scrollbar with both the standard properties and the WebKit pseudo-elements.CSS Tooltip GeneratorGenerate a tooltip from a data attribute — no JavaScript, no extra markup.CSS Named Colours ReferenceEvery CSS colour name with its HEX, RGB, HSL and OKLCH value, sortable by hue and contrast.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.

Last updated

More css generators