EnglishEN

CSS Cursor List

Hover over a card to try the cursor, then click to copy the CSS.

Your text and files never leave your browser — nothing is sent to a server.

Hover over a card to switch to that cursor. Click to copy the CSS line.

General

Links & status

Selection

Drag & drop

Resize & scroll

Zoom

How to use

  1. Hover over any card to see that cursor in action. The exact look varies a little between operating systems and browsers.
  2. Click a card to copy “cursor: value;” and paste it into your CSS rule.
  3. Type a word such as resize or move into “Search” to narrow the list.
  4. Phones and tablets have no mouse cursor, so check the previews on a computer.

FAQ

Can I use my own image as a cursor?

Yes: cursor: url(cursor.png) 4 4, pointer; — the two numbers set the hotspot (x y), and the standard value at the end is a required fallback in case the image fails to load. Keep the image at 32×32px or smaller.

When should I use pointer versus default?

Use pointer on things people can click, such as links and buttons, and default everywhere else. A pointer on something that is not clickable confuses users.

grab does not show up in some browsers.

Very old browsers needed prefixes such as -webkit-grab, but current Chrome, Edge, Firefox and Safari all support the standard grab and grabbing values.

Related tools

CSS GradientLinear, radial and conic gradientsCSS FilterBlur, brightness, grayscale and moreColor PickerHEX, RGB, HSL and CMYK in one placeHTML EditorWrite HTML, CSS and JS, see it live

All tools