How to Change the CSS Cursor (Every Option Explained)
The cursor communicates interactivity — it tells users what will happen when they click. A pointer says 'this is clickable,' a grab says 'this is draggable,' and a not-allowed says 'this action is disabled.' Using the right cursor improves usability without any visual design changes.
- All CSS cursor values demonstrated: pointer, grab, crosshair, zoom-in, text, wait, not-allowed, and custom cursors.
- Covers common cursor values.
- Covers applying cursors.
- Covers custom cursors.
- Covers cursor and accessibility.
Common Cursor Values
pointer — clickable elements (links, buttons). default — standard arrow. text — text selection (inputs, editable areas). grab / grabbing — draggable elements (before and during drag). crosshair — precision selection (image editors, color pickers). move — movable elements. zoom-in / zoom-out — zoomable content. wait — loading/processing. not-allowed — disabled actions. help — elements with tooltips or help text.
Applying Cursors
Set cursor on any element:
transform and opacity for smooth 60fps performance. These properties are handled by the GPU compositor and skip expensive layout recalculations..draggable { cursor: grab; }
.draggable:active { cursor: grabbing; }
.disabled-button { cursor: not-allowed; opacity: 0.5; }
.zoomable-image { cursor: zoom-in; }
The cursor applies when the mouse is over the element. The CSS Cursor Gallery lets you hover over each cursor type to see the effect live.
Custom Cursors
Use any image as a cursor:
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps..custom-cursor {
cursor: url('/cursor.png') 12 12, auto;
}
The two numbers (12 12) set the hotspot — the pixel coordinates within the image that represent the click point. The fallback (auto) is required in case the image fails to load. Use 32×32 PNG images with transparency for best results.
Cursor and Accessibility
Don't hide the cursor (cursor: none) unless you're building a full-screen game or kiosk application. Users rely on cursor feedback for orientation. Always provide cursor: not-allowed on disabled elements so users understand they can't interact. Never use cursor: pointer on non-interactive elements — it creates false expectations.