Last updated
Cursor Accessibility Considerations
- Never rely on cursor alone to communicate interactivity — touch devices have no cursor
- Always pair cursor changes with visual indicators (hover styles, focus rings)
- The
not-allowedcursor on disabled elements should be paired witharia-disabled="true" - Custom cursor images should have a standard cursor fallback
- Cursor hotspot coordinates must be accurate for custom cursors to feel natural
- Avoid cursors that are too large or visually complex — they can obscure content
The CSS Cursor Generator on TechConverter.me provides a visual preview of all standard cursor values and helps you create custom cursor CSS with correct syntax and fallbacks. Select your cursor type, preview it in the browser, and copy the generated CSS directly into your stylesheet.
Examples
Example 1: Standard Cursor Values Reference
The most commonly used CSS cursor values and when to use them:
/* Default arrow cursor */
.element { cursor: default; }
/* Pointer (hand) — clickable elements */
a, button, [role="button"] { cursor: pointer; }
/* Text selection cursor */
p, span, input, textarea { cursor: text; }
/* Move cursor — draggable elements */
.draggable { cursor: move; }
/* Grab / grabbing — drag handles */
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
/* Not allowed — disabled elements */
button:disabled { cursor: not-allowed; }
/* Wait / progress — loading states */
.loading { cursor: wait; }
.processing { cursor: progress; }
/* Crosshair — precise selection */
.canvas, .map { cursor: crosshair; }
/* Zoom */
.zoomable { cursor: zoom-in; }
.zoomable.zoomed { cursor: zoom-out; }
Example 2: Resize Cursors for Resizable Elements
Resize cursors indicate which direction an element can be resized:
/* Resize handles for a resizable panel */
.resize-n { cursor: n-resize; } /* top edge */
.resize-s { cursor: s-resize; } /* bottom edge */
.resize-e { cursor: e-resize; } /* right edge */
.resize-w { cursor: w-resize; } /* left edge */
.resize-ne { cursor: ne-resize; } /* top-right corner */
.resize-nw { cursor: nw-resize; } /* top-left corner */
.resize-se { cursor: se-resize; } /* bottom-right corner */
.resize-sw { cursor: sw-resize; } /* bottom-left corner */
/* Bidirectional resize */
.resize-ew { cursor: ew-resize; } /* horizontal resize */
.resize-ns { cursor: ns-resize; } /* vertical resize */
/* Resizable panel implementation */
.panel-resize-handle {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 4px;
cursor: ew-resize;
background: transparent;
}
.panel-resize-handle:hover {
background: rgba(37, 99, 235, 0.3);
}
Example 3: Custom Cursor Image
Custom cursor images replace the standard cursor with a custom graphic:
/* Custom cursor with fallback */
.custom-cursor {
cursor: url('/cursors/custom.cur'), auto;
}
/* PNG cursor with hotspot coordinates */
.drawing-tool {
cursor: url('/cursors/pencil.png') 0 24, crosshair;
/* hotspot: 0px from left, 24px from top (tip of pencil) */
}
/* SVG cursor (modern browsers) */
.eraser-tool {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='20' height='12' x='2' y='6' rx='2' fill='%23fff' stroke='%23333'/%3E%3C/svg%3E") 12 12, auto;
}
/* Multiple fallbacks */
.special-cursor {
cursor: url('/cursors/special.cur'),
url('/cursors/special.png') 8 8,
pointer; /* final fallback is always a standard cursor */
}