CSS Cursor Tester
Move the pointer over each button to see the cursor it sets. Click one to choose it for the test area and get the line of CSS.
Move the pointer over this area to test pointer
Touch screens do not show a cursor. These values matter for mouse and pen users, so never rely on one to carry important information.
About CSS Cursor Tester
The cursor property changes the pointer when it is over an element, and the right choice quietly tells people what will happen: a hand for something you can follow, a text bar for text, arrows at the edges for things that resize. There are 36 standard values, and the names are not always obvious. This page shows each one on its own button.
Move the pointer over a button to see its cursor drawn by your own system. Each button has a short note on when to use it. Click one to apply it to the large test area and get the line of CSS. The cursor styles come from your system, so they may look a little different on another computer.
How to use CSS Cursor Tester
- Move the pointer over the buttons to see each cursor.
- Read the note beside each value.
- Click a button to set it on the test area.
- Copy the line of CSS.
Common uses
- Choosing the right cursor for a custom control
- Checking what a cursor value looks like before using it
- Learning the less common values such as cell and alias
- Testing how grab and grabbing feel together
Frequently asked questions
Which cursor should links and buttons use?
Pointer, the hand, is the usual choice for anything that acts like a link or a button. Ordinary text keeps the default text bar and ordinary areas keep the arrow.
What do grab and grabbing do?
Grab shows an open hand over something that can be dragged, and grabbing shows a closed hand while it is being held. Switch from one to the other when the drag starts.
Why does a button show no cursor for none?
The value none hides the pointer completely. It is meant for things such as video playback or games, and should be used sparingly because people can lose track of where the pointer is.
Can I use my own cursor image?
Yes, with a url() value followed by a standard value as a fallback, but images need care for size and visibility. The standard values cover most needs.