CSS Cursor Viewer
Visually check and preview CSS cursor properties.
Cursor List (Hover to preview)
General
- auto
- default
- none
Links & States
- context-menu
- help
- pointer
- progress
- wait
Selection
- cell
- crosshair
- text
- vertical-text
Drag & Drop
- alias
- copy
- move
- no-drop
- not-allowed
- grab
- grabbing
Resize & Scroll
- all-scroll
- col-resize
- row-resize
- e-resize
- n-resize
- ne-resize
- nw-resize
- s-resize
- se-resize
- sw-resize
- w-resize
- ew-resize
- ns-resize
- nesw-resize
- nwse-resize
Zoom
- zoom-in
- zoom-out
What is CSS Cursor Viewer?
CSS Cursor Viewer is a tool that displays all cursor styles available through the CSS cursor
property categorized by type, allowing you to preview them in real-time. Web developers and designers can instantly see the visual effect of each cursor style, making it easier to choose the optimal cursor for user interface design. Additionally, the tool allows you to copy any selected cursor value in CSS format with a single click, saving development time and preventing coding errors.
CSS Cursor Property Basics
The cursor
property in CSS controls the shape of the cursor that appears when a mouse pointer is placed over an element. Selecting appropriate cursor styles can improve UX (User Experience) in several ways:
- Visual indication of interactivity: Using
pointer
for links and buttons - State representation: Providing feedback with
wait
orprogress
cursors during processing - Operation restrictions: Indicating unavailable elements with the
not-allowed
cursor - Interaction suggestions: Applying
grab
/grabbing
cursors for draggable elements
Features and Capabilities
- Category-based display: Cursors 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 and directional cursors)
- Zoom (
zoom-in
,zoom-out
)
- General (
- Real-time preview: Instantly see how each cursor appears by simply hovering over its card
- One-click copying: Copy any cursor value directly to clipboard in
cursor: value;
format - Visual grid layout: All cursor types neatly organized for easy browsing
How to Use CSS Cursor Viewer
Basic Operation
- Open the page to see all cursor styles displayed in cards categorized by type
- Place your mouse pointer over any card to see the cursor style applied to that card
- When you find a cursor style you like, click the copy button on the right side of the card
- The CSS declaration in
cursor: name;
format is copied to your clipboard - You can directly paste the copied value into your CSS file or style definitions
Tips for Choosing Cursors
Cursor styles play an important role in visually communicating the function and state of elements. Consider these usage patterns:
- Clickable elements: Use
pointer
to indicate operability - Text selection: Use
text
to show text is selectable - Drag operations: Use a combination of
grab
(before drag) andgrabbing
(during drag) - Resizing: Use directional resize cursors (
e-resize
,nw-resize
, etc.) based on direction - Processing: Use
wait
orprogress
to indicate ongoing operations
CSS Cursor Implementation Examples
Common usage examples in web interfaces:
/* Display hand cursor for 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 and Considerations
Most cursor styles are supported in modern browsers, but some special cursors (e.g., zoom-in
, zoom-out
) may display differently in certain browsers. It's recommended to verify the display in target browsers based on your project requirements.
Also, since cursors are not displayed on mobile devices, you should consider other visual feedback (color changes, animations, etc.) for touch interfaces.