Real-time CSS cursor visualizer and property testing tool.
Hover over any test card to immediately preview the browser cursor response. Click to lock the cursor onto the global sandbox or copy the exact CSS and Tailwind classes.
cursor-pointer
Filter by cursor functional category or search by keyword.
Design dynamic SVG cursors, test custom hotspot coordinates, and experiment freely.
Fallback cursor auto is automatically appended per W3C specification.
cursor: pointer;
Move your pointer anywhere inside this box to experience the applied cursor style in real-time.
Detailed guide on cursor semantics, performance, accessibility, and modern browser standards.
The CSS cursor property specifies the mouse cursor type to be displayed when the pointing device moves over a specific element on the webpage. It is defined in the W3C CSS Basic User Interface specification and allows web developers to communicate affordances and interactive states—such as clickable buttons, resizable panels, text selection areas, and background loading processes—directly to the user.
The cursor: default property displays the standard platform arrow cursor, indicating general neutral content without direct triggerable actions. In contrast, cursor: pointer renders a pointing hand indicator, traditionally signaling hyperlinks, interactive clickable buttons, tabs, and toggles to provide immediate visual feedback that an element can be activated by the user.
Custom cursors are implemented using the url() syntax followed by required coordinate hotspot offsets and a mandatory fallback standard cursor, such as cursor: url('custom.svg') 12 12, auto;. Modern browsers recommend using SVG or high-density PNG images sized between 16x16 and 32x32 pixels to prevent performance lag, memory spikes, and OS clipping issues across high-DPI displays.
Use cursor: not-allowed for disabled interactive controls like inactive submit buttons, unavailable form inputs, or forbidden permission zones. Use cursor: no-drop specifically during active HTML5 drag-and-drop operations when the item being dragged is hovering over a container or boundary that cannot accept the dropped payload.
The cursor: wait property shows a blocking hourglass or spinning wheel, informing the user that the application is busy and no user interaction can be accepted until processing finishes. The cursor: progress state indicates that a background asynchronous task is running while the page or interface remains partially interactive and clickable.
The cursor: grab value displays an open hand indicating that an element (such as an interactive map, canvas viewport, or Kanban task card) can be grabbed and dragged. When the user holds down the mouse button during active dragging, switching dynamically to cursor: grabbing gives immediate tactile visual feedback that the element is securely held.
Directional resize cursors—including n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, and sw-resize—signal to users that a window border, column divider, or modal boundary can be resized in specific cardinal compass directions. Modern CSS also supports bidirectional values like col-resize, row-resize, ew-resize, and ns-resize for flexible layout splitters.
The cursor: none declaration completely hides the native operating system cursor over the target element. This is widely used in full-screen HTML5 games, video players during inactive playback, 3D WebGL canvas environments utilizing Pointer Lock API, and bespoke cursor design applications that render their own hardware-accelerated pointer trails.
Proper cursor states align with standard accessibility guidelines by matching user expectations with visual affordances. Misleading cursor assignments—such as applying cursor: pointer to static non-clickable text or using cursor: default on actionable buttons—can confuse users with cognitive motor disabilities and decrease website trust.
Yes, standard CSS cursor keywords and custom URL cursors enjoy full cross-browser compatibility across Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and Opera. Always declare a fallback keyword like auto or pointer at the end of custom url() definitions to ensure graceful degradation if image loading is interrupted.