What are all the CSS cursor values?

MDN lists 36 keywords: auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text, alias, copy, move, no-drop, not-allowed, grab, grabbing, the eight compass resize cursors, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in and zoom-out. The table above groups them the way this tool does: 8 Pointer, 11 Interaction, 15 Resize and 2 Text.

Which cursor should I use for a button, a link or a disabled control?

MDN describes pointer as the cursor that indicates a link; giving a button cursor: pointer as well is a design choice you make yourself. Use not-allowed on a disabled control, grab and then grabbing for something being dragged, move for an item that can be moved, text over selectable text, and col-resize or row-resize on a splitter. Use progress while work runs in the background and the page still responds, and wait only when it does not.

Why is my custom cursor image not showing?

Browsers draw cursor images up to 128 by 128 pixels and recommend 32 by 32; a larger image is ignored and the fallback keyword is used instead (MDN). The upload box refuses a file over 256 KB or an image wider or taller than 128 pixels, says so, and notes any image above 32 pixels. A file the browser cannot draw as an image is refused too.

Does the tool show a picture of each cursor?

No. Hovering a cell changes the real cursor over the cell and the preview zone, and your browser and operating system draw it, so the shapes differ between Windows, macOS, Linux and phones. The tool does not draw or compare them.

CSS Cursor Generator

Search 36 CSS cursor keywords, see each one as your system draws it, try a custom cursor image, and copy the CSS, SCSS, variable or Tailwind code. How it works

About the CSS Cursor Generator

CSS has 36 cursor keywords, from auto and default to zoom-in and zoom-out, and cursor: pointer; is the one for a link. This CSS cursor generator lists all 36 in four groups, shows each as your system draws it when you hover its cell, and copies the one you pick as CSS, SCSS, a CSS variable or a Tailwind class. It also tests a custom cursor image of up to 128 by 128 pixels.

The 36 cursor keywords by group

Group	Keywords	Cursors
Pointer	8	auto, default, none, context-menu, help, pointer, progress, wait
Interaction	11	cell, crosshair, alias, copy, move, no-drop, not-allowed, grab, grabbing, zoom-in, zoom-out
Resize	15	e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll
Text	2	text, vertical-text

The groups are the tool’s own, used by its filter buttons; all-scroll sits in Resize here.

The four export formats, for not-allowed

Format	Code
CSS	cursor: not-allowed;
SCSS	$cursor-not-allowed: not-allowed;
CSS Var	--cursor-not-allowed: not-allowed;
Tailwind	cursor-[not-allowed]

The Tailwind tab writes the arbitrary-value form for every keyword. Tailwind also ships a ready class for each of the 36, such as cursor-not-allowed or cursor-pointer, which gives the same CSS.

How to use this tool

Search the keywords or pick a group: All, Pointer, Interaction, Resize or Text.
Move the pointer over a cell, or Tab to the grid and use the arrow keys, to see that cursor in the preview zone and its code in the panel.
Pick CSS, SCSS, CSS Var or Tailwind, then click a cell or the copy button. Star a cursor to keep it as a favorite.
For your own image, upload a .cur, .png or .svg file of 256 KB or less and 128 by 128 pixels or less, set Hotspot X and Y (0 0 is the top-left pixel), choose a fallback cursor and copy the CSS.

Frequently asked questions

What are all the CSS cursor values?: MDN lists 36 keywords: auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text, alias, copy, move, no-drop, not-allowed, grab, grabbing, the eight compass resize cursors, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in and zoom-out. The table above groups them the way this tool does: 8 Pointer, 11 Interaction, 15 Resize and 2 Text.
Which cursor should I use for a button, a link or a disabled control?: MDN describes pointer as the cursor that indicates a link; giving a button cursor: pointer as well is a design choice you make yourself. Use not-allowed on a disabled control, grab and then grabbing for something being dragged, move for an item that can be moved, text over selectable text, and col-resize or row-resize on a splitter. Use progress while work runs in the background and the page still responds, and wait only when it does not.
How do I set a custom cursor image in CSS?: Write one or more url() values, then a keyword: cursor: url("pointer.png") 4 12, pointer;. The keyword is required and goes last, and the browser uses it when no image loads. The two numbers are the hotspot, the pixel that acts as the pointer tip, counted from the top-left corner. This tool embeds your upload as a data URL and writes the Hotspot X and Y you set (0 0 by default), which replace any hotspot stored inside a .cur file.
Why is my custom cursor image not showing?: Browsers draw cursor images up to 128 by 128 pixels and recommend 32 by 32; a larger image is ignored and the fallback keyword is used instead (MDN). The upload box refuses a file over 256 KB or an image wider or taller than 128 pixels, says so, and notes any image above 32 pixels. A file the browser cannot draw as an image is refused too.
Does the tool show a picture of each cursor?: No. Hovering a cell changes the real cursor over the cell and the preview zone, and your browser and operating system draw it, so the shapes differ between Windows, macOS, Linux and phones. The tool does not draw or compare them.

Picking a keyword and testing a custom cursor

Search the 36 keywords or filter them by Pointer, Interaction, Resize and Text, then move the mouse over a cell. The cursor you see is the one your operating system draws, not a picture, so a resize arrow on macOS looks different from the same keyword on Windows. Click a cell to copy the code as CSS, SCSS, a CSS variable or a Tailwind class, and star the ones you use often: favorites stay in this browser until you clear them.

The upload panel is for a cursor of your own, such as a brush in a drawing app or a target in a browser game. Choose the fallback keyword the browser should use if the image fails (pointer, default, grab, crosshair or none), set the hotspot on the tip of your image, and copy the CSS that lists your image first.

Keywords and custom images

cursor: url(image) x y, keyword;

The grid holds the 36 keywords listed on MDN, from auto and default to zoom-in and zoom-out. The keyword is not optional: CSS needs a fallback keyword last in the list, and the browser uses it when no image loads. Browsers draw cursor images up to 128 by 128 pixels and recommend 32 by 32; a larger image is ignored.

The upload box checks that. It refuses a file over 256 KB or an image wider or taller than 128 pixels, and it notes any image above 32 pixels. The two numbers after the image are the hotspot: the pixel that acts as the pointer tip, counted from the top-left corner (MDN). After an upload, set Hotspot X and Hotspot Y (0 0 by default). The code always writes them, replacing any hotspot stored in a .cur file.

Example: a 24 by 24 PNG with hotspot 4 and 12 and the fallback pointer gives cursor: url(data:image/png;base64,...) 4 12, pointer;. On a real page, save the file and write cursor: url("pointer.png") 4 12, pointer;.

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.