CSS Cursor Viewer
Lists CSS cursor properties.
Cursor list (hover to preview)
General
- auto
- default
- none
Links & status
- context-menu
- help
- pointer
- progress
- wait
Selection
- cell
- crosshair
- text
- vertical-text
Drag & drop
- alias
- copy
- move
- no-drop
- not-allowed
- grab
- grabbing
Resizing & scrolling
- 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
Zooming
- zoom-in
- zoom-out
What is the CSS Cursor Viewer?
The CSS Cursor Viewer lists the various cursor styles that can be specified with the CSS cursor property and provides the ability to preview them in real-time. You can easily select the appropriate cursor while visually checking how each cursor style is actually displayed.
This is a powerful support tool for optimizing the look and feel of web design and front-end development.
How to use the CSS Cursor Viewer
You will see a list of cards with all cursor styles applied, which can be specified with the cursor property of CSS.
You can hover the mouse over a card to see the applied cursor.
You can also copy the cursor as a cursor property by clicking the copy button.
What is cursor?
cursor is a property used in CSS to specify the shape of the cursor that appears when the user hovers the mouse pointer over an element. By default, a cursor such as an arrow or an I-beam for text selection is automatically displayed depending on the type of element and its state, but this can be customized by using the cursor property.
For example, you can display a palm shape when the mouse hovers over a link, or a round cursor with a diagonal line in areas where manipulation is prohibited. You can also specify a custom image to create your own cursor style.