What is CSS Cursor Viewer?

A tool that displays all cursor styles available through the CSS cursor property categorized by type, with real-time preview capability. Instantly see the visual effect of each cursor style and copy any selected cursor value in CSS format with a single click.

Streamlines the selection of optimal cursors for UI design and prevents coding errors.

How to Use

All cursor styles are displayed in card format by category. Hover over any card to see the cursor style applied, and click the copy button on the right to copy the CSS declaration in cursor: name; format to your clipboard.

About CSS Cursor Property

The cursor property controls the shape of the mouse pointer over elements. Selecting appropriate cursor styles can improve UX in several ways:

• Visual indication of interactivity - Use pointer for links and buttons
• State representation - Provide feedback with wait or progress cursors during processing
• Operation restrictions - Indicate unavailable elements with not-allowed cursor
• Interaction suggestions - Apply grab/grabbing cursors for draggable elements

Features

• Category-based display - Organized into 6 logical categories
  • General (auto, default, none, etc.)
  • Links & States (pointer, wait, progress, etc.)
  • Selection (text, crosshair, cell, etc.)
  • Drag & Drop (grab, move, not-allowed, etc.)
  • Resize & Scroll (resize cursors, directional cursors)
  • Zoom (zoom-in, zoom-out)
• Real-time preview - See cursor display by simply hovering over cards
• One-click copying - Copy directly in cursor: value; format

Choosing Cursors

Cursor styles play an important role in visually communicating element function and state:

• Clickable elements - Use pointer to indicate operability
• Text selection - Use text to show text is selectable
• Drag operations - Combine grab (before drag) and grabbing (during drag)
• Resizing - Use directional resize cursors (e-resize, nw-resize, etc.)
• Processing - Use wait or progress to indicate ongoing operations

Implementation Examples

/* Links and buttons */
.button,
a {
  cursor: pointer;
}

/* Draggable elements */
.draggable {
  cursor: grab;
}
.draggable:active {
  cursor: grabbing;
}

/* Disabled elements */
.disabled {
  cursor: not-allowed;
}

/* Loading state */
.loading {
  cursor: progress;
}

Browser Compatibility

Most cursor styles are supported in modern browsers, but some special cursors (zoom-in, zoom-out, etc.) may display differently in certain browsers. Verify display in target browsers based on your project requirements.

Cursors are not displayed on mobile devices, so consider other visual feedback (color changes, animations, etc.) for touch interfaces.