Interactive reference for all standard CSS cursor properties. Hover to test and click to copy the CSS code. Perfect for users needing a css mouse pointer.
Browse the grid of available cursor properties.
Hover over a block to test what the cursor looks like on your system.
Click a block to preview it in the test area.
Hover over the test area and click the copy button to get the CSS code.
Generally yes, but the exact graphical icon is determined by the user's operating system (Windows, Mac, Linux).
The cursor CSS property controls what the mouse pointer looks like when a user hovers over an element. It's one of those tiny yet impactful details that communicates affordance — it signals to the user what's interactive, what's draggable, what's resizable, and what's not.
Get it right and the interface feels intuitive. Get it wrong (using pointer everywhere, or forgetting to change the cursor on draggable elements) and users feel confused without being able to articulate why.
The CSS spec defines over 30 cursor keyword values. Most developers know default, pointer, and not-allowed — but the full set is much richer:
General Interaction Cursors
| CSS Value | When to Use It |
|---|---|
default | The normal arrow cursor. Use for non-interactive page content. |
none | Hides the cursor entirely. Use sparingly — for fullscreen games or custom implementations. |
pointer | The hand with pointing finger. Use for clickable links and buttons. |
wait | The spinning wheel or hourglass. Signals the app is processing. |
progress | Like wait but indicates background processing — the user can still interact. |
not-allowed | A circle with a slash. Makes the "no" gesture clear for disabled elements. |
help | Arrow with a question mark. Use on elements with tooltips or help text. |
Text and Selection Cursors
| CSS Value | When to Use It |
|---|---|
text | The I-beam. Normally applied automatically to <input> and text nodes, but you may need it on custom elements. |
vertical-text | I-beam rotated 90°. For vertical text layouts common in East Asian typography. |
crosshair | Fine cross hairs. Use in color pickers, canvas drawing tools, or selection regions. |
Resize and Drag Cursors
| CSS Value | Direction |
|---|---|
n-resize | North (upward) resize |
s-resize | South (downward) resize |
e-resize | East (rightward) resize |
w-resize | West (leftward) resize |
ne-resize | Northeast (top-right) resize |
nw-resize | Northwest (top-left) resize |
se-resize | Southeast (bottom-right) resize |
sw-resize | Southwest (bottom-left) resize |
ew-resize | Bidirectional horizontal resize |
ns-resize | Bidirectional vertical resize |
nesw-resize | Diagonal bidirectional |
nwse-resize | Diagonal bidirectional |
col-resize | Column width adjustment |
row-resize | Row height adjustment |
all-scroll... |
Looking for a more detailed deep-dive and advanced tips?
Read Full Article on our BlogYour data never leaves this device. All processing is handled locally by JavaScript.
default
Standard arrow
cursor: default;Move your mouse here
to test it out.
Proper CSS cursors dramatically improve UX. For example, use not-allowed on disabled buttons, and grab on draggable elements.