# 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.

**URL:** https://convertto.tech/t/css-cursor-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

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

## How to use

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

## FAQ

### 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.

## Related tools

- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Hover Effect Generator](https://convertto.tech/t/css-hover-effects-generator): Generate a hover effect that animates cleanly, with the reduced-motion guard included.
- [CSS Scrollbar Styler](https://convertto.tech/t/css-scrollbar-generator): Style a scrollbar with both the standard properties and the WebKit pseudo-elements.
- [CSS Tooltip Generator](https://convertto.tech/t/css-tooltip-generator): Generate a tooltip from a data attribute — no JavaScript, no extra markup.
- [CSS Named Colours Reference](https://convertto.tech/t/css-named-colors): Every CSS colour name with its HEX, RGB, HSL and OKLCH value, sortable by hue and contrast.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.