What is the CSS cursor property?
The cursor property changes the mouse pointer when it moves over an element. The right cursor tells users what will happen before they click: a hand means "this is a link", an I-beam means "you can select text", and a grabbing hand means "you are dragging something". Using the correct cursor makes a website or web app feel intuitive.
How to use this viewer
- Move your mouse over any box to see that cursor in your own browser and operating system.
- Type in the filter box to find a cursor quickly, for example "resize".
- Click a box to copy the CSS, such as
cursor: grab;, and paste it into your stylesheet.
The most useful cursors
| Cursor | When to use it |
|---|---|
pointer | Clickable elements that are not normal links, such as custom buttons or cards |
not-allowed | Disabled buttons and actions that cannot be done right now |
grab / grabbing | Draggable items, maps, sliders and sortable lists |
wait / progress | While something is loading (progress still allows clicking) |
zoom-in | Images that open larger when clicked |
col-resize | Draggable column dividers in tables and editors |
Custom cursor images
You can also use your own image: cursor: url(cursor.png) 4 4, auto;. The two numbers set the "hot spot", the exact pixel that clicks. Always add a normal cursor such as auto at the end as a fallback. Keep custom cursors to 32 × 32 pixels and use them sparingly, because unusual pointers can confuse visitors.
Frequently asked questions
Why do some cursors look the same?
Each operating system draws its own cursors. Windows, macOS and Linux may show the same image for several values, such as move and all-scroll.
Do cursors work on phones?
No. Touch screens have no pointer, so never rely on the cursor alone to explain how something works.
Should links use cursor: pointer?
Links already show a pointer by default. Add it yourself only for other clickable elements.