What is CSS Cursor Viewer?

CSS Cursor Viewer is a tool for checking the cursor values available in the CSS cursor property, previewing them on hover, and copying the matching declaration in CSS format. It helps when you want to choose the right cursor for buttons, links, drag handles, resize controls, and other UI states.

How to Use

1. Browse the cursor list grouped by category.
2. Hover over a card to preview that cursor.
3. Click the copy button for the value you want.
4. Paste the copied cursor: value; declaration into your CSS.

Because the tool shows both the name and the actual preview, it is easier to compare values such as grab, not-allowed, progress, or zoom-in without guessing from the name alone.

Categories You Can Check

• General
• Links and states
• Selection
• Drag and drop
• Resize and scroll
• Zoom

Common values such as pointer, text, grab, col-resize, and zoom-out are grouped so you can compare similar cursor types quickly.

When to Use Which Cursor

Clickable Elements

pointer is the common choice for links and buttons when you want to show that the element can be clicked.

Text and Selection

Use values like text, cell, or crosshair when the user is selecting content or working in a more precise area.

Drag and Move Interactions

grab works well before dragging starts, and grabbing helps indicate that an item is currently being moved.

Resize Controls

Directional values such as col-resize, row-resize, or nwse-resize are useful for resize handles.

Output Example

For example, if you copy pointer, the output looks like this:

cursor: pointer;

Other values are copied in the same format, so they are ready to paste into a style rule.

Use Cases

• Choosing the right cursor for buttons or links
• Checking cursor styles for drag-and-drop UI
• Reviewing resize handle cursors before implementation
• Comparing CSS cursor values visually instead of by name only

Things to Keep in Mind

• Cursor appearance can vary a little between browsers and operating systems
• Touch devices may not show cursors at all
• Cursor changes alone are not always enough, so it is often better to combine them with other UI feedback such as labels, icons, or color changes