CSS Cursor Code with Live Preview
Cursors are a subtle but crucial part of the user interface that guide behavior, set expectations, and improve overall usability. Hover over any cursor name in the left column to see a live preview.
| Cursor Names | CSS Codes |
|---|---|
| alias | .alias {
cursor: alias;
} |
| all-scroll | .all-scroll {
cursor: all-scroll;
} |
| auto | .auto {
cursor: auto;
} |
| cell | .cell {
cursor: cell;
} |
| col-resize | .col-resize {
cursor: col-resize;
} |
| context-menu | .context-menu {
cursor: context-menu;
} |
| copy | .copy {
cursor: copy;
} |
| crosshair | .crosshair {
cursor: crosshair;
} |
| default | .default {
cursor: default;
} |
| e-resize | .e-resize {
cursor: e-resize;
} |
| ew-resize | .ew-resize {
cursor: ew-resize;
} |
| grab | .grab {
cursor: grab;
} |
| grabbing | .grabbing {
cursor: grabbing;
} |
| help | .help {
cursor: help;
} |
| move | .move {
cursor: move;
} |
| n-resize | .n-resize {
cursor: n-resize;
} |
| ne-resize | .ne-resize {
cursor: ne-resize;
} |
| nesw-resize | .nesw-resize {
cursor: nesw-resize;
} |
| ns-resize | .ns-resize {
cursor: ns-resize;
} |
| nw-resize | .nw-resize {
cursor: nw-resize;
} |
| nwse-resize | .nwse-resize {
cursor: nwse-resize;
} |
| no-drop | .no-drop {
cursor: no-drop;
} |
| none | .none {
cursor: none;
} |
| not-allowed | .not-allowed {
cursor: not-allowed;
} |
| pointer | .pointer {
cursor: pointer;
} |
| progress | .progress {
cursor: progress;
} |
| row-resize | .row-resize {
cursor: row-resize;
} |
| s-resize | .s-resize {
cursor: s-resize;
} |
| se-resize | .se-resize {
cursor: se-resize;
} |
| sw-resize | .sw-resize {
cursor: sw-resize;
} |
| text | .text {
cursor: text;
} |
| url | .url {
cursor: url(myBall.cur), auto;
} |
| w-resize | .w-resize {
cursor: w-resize;
} |
| wait | .wait {
cursor: wait;
} |
| zoom-in | .zoom-in {
cursor: zoom-in;
} |
| zoom-out | .zoom-out {
cursor: zoom-out;
} |
Apply Cursor Code to whole Webpage
body {
cursor: pointer; /* Replace 'pointer' with any cursor type */
}Examples:
-
cursor: wait;- Shows loading cursor on entire page -
cursor: grab;- Shows grab cursor everywhere -
cursor: crosshair;- Shows crosshair on entire page
Apply Cursor Code to Specific Parts of HTML
To specific elements:
.button {
cursor: pointer;
}
.draggable {
cursor: grab;
}
.text-area {
cursor: text;
}To HTML elements directly:
<button style="cursor: pointer">Click me</button>
<p style="cursor: move">Drag me</p>
<a href="#" style="cursor: help">Need help?</a>Apply CSS cursor to a specific part of the page
If you want to change the cursor only for a specific area, give that area a class or ID and style it.
Example HTML:
<p id="game-area">
Click here to play the game!
</p>
<p>
This is normal text area.
</p>
Example CSS:
#game-area {
cursor: crosshair; /* custom cursor only inside this area */
}
✅ The cursor will change only when hovering over that specific <p>.
Bonus: Use a custom image cursor
If you want to use your own cursor image:
html, body {
cursor: url('cursor.png'), auto;
}
or for a section only:
#game-area {
cursor: url('crosshair.png'), crosshair;
}
(Make sure your image file is small, e.g., 32x32 pixels, and in .png or .cur format.)
