CSS Cursor Viewer
Fast, accurate and free online css cursor viewer tool running directly in your browser.
-
1Enter data
Enter content, paste text or load a file from disk. -
2Click the button
The tool will immediately process your data in the browser. -
3Get the result
Copy the finished text or save the file to your device.
return "Result ready in 0.1s";
}
Rate this tool:
Related tools
Other tools you may find usefulCSS Cursor Preview - All cursor property values
CSS cursor property: Controls the appearance of the mouse pointer over an element. The correct cursor improves UX - the user immediately knows whether the element is clicked, dragged or editable. The tool displays a visual preview of all 30+ cursor values.
All CSS cursor values
Default: auto, default, none. Links: pointer (paw). Text: text (beam), vertical-text. Tools: crosshair, cell. Drag: grab, grabbing (when dragging), move, all-scroll, col-resize, row-resize. Resize: n-resize, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, nesw-resize, nwse-resize. Status: wait (hourglass), progress (circle+indicator), not-allowed, no-drop, help, zoom-in, zoom-out, copy, alias.
When to use which cursors
pointer: links, buttons, clickable elements. default: passive elements. text: text fields, editable content. grab/grabbing: drag-and-drop (grab = hover, grabbing = active dragging). crosshair: drawing tools, point selection. not-allowed: disabled elements. zoom-in/zoom-out: galleries, maps. col-resize/row-resize: resize table or panel columns/rows.
Custom CSS cursor
cursor: url("cursor.png"), pointer; (decimal fallback). Format: PNG, CUR, ANI. Size: max 128×128px, recommended 32×32px (smaller = better UX). hotspot: cursor: url("cel.png") 16 16, crosshair; (16px = hotspot). Animated cursor: cursor: url("anim.ani"), auto; (Windows IE only). @keyframes + JS: changing class with different url() cursors.
Cursor and accessibility
Do not remove the cursor: cursor: none makes navigation difficult for people with motor difficulties. Don't use pointer on unclickable elements: confusing. cursor: not-allowed for disabled: better than no change (user knows it can't be clicked). cursor: help for elements with tooltip. Consequence: same element type = same cursor.
Frequently asked questions
How to change the cursor globally on the page?
body { cursor: crosshair; } – changes the default cursor. But: interactive elements (a, button, input) have their cursor via UA stylesheet - it will be overwritten. Better: CSS variables. :root { --cursor-base: default; } body { cursor: var(--cursor-base); } and change the variable via JS.
How to detect device type for cursor management?
@media (hover: hover) { .btn:hover { cursor: pointer; } } – only for mice. @media (pointer: coarse) – touch device (mobile). @media (pointer: fine) – mouse or stylus. On mobile: cursor: it doesn't matter - there is no cursor by touch. Good practices: Don't rely on hover-only interactions.
Does cursor: pointer affect performance?
No - CSS cursor is a hint for the operating system, rendering by the OS cursor manager, not by CSS compositor. No effect on repaint/reflow. Changing the cursor via JS (element.style.cursor = ...) is immediate. Custom cursors (url()): may cause lag when the cursor image first loads.
How to block cursor change on iframe?
Problem: iframe with external content changes cursor. Solution: pointer-events: none on iframe (blocks interaction and cursor). Or: overlay div on iframe with its own cursor. Technique: wrapper { position: relative; } .overlay { position: absolute; inset: 0; cursor:default; }
Cursor in dark and light mode?
CSS cursor: color scheme independent - cursor appearance depends o