---
title: "CSS Cursor Viewer - Preview CSS cursor styles in one place"
description: "Preview CSS cursor styles in one place. You can compare options such as pointer, grab, and not-allowed when choosing cursors for a UI."
canonical_url: "https://web-toolbox.dev/en/tools/css-cursor-viewer"
meta:
  author: K
  "og:description": "Preview CSS cursor styles in one place. You can compare options such as pointer, grab, and not-allowed when choosing cursors for a UI."
  "og:image": "https://web-toolbox.dev/og/en/tools/css-cursor-viewer-71aafb19.png"
  "og:image:alt": "CSS Cursor Viewer"
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "CSS Cursor Viewer - Preview CSS cursor styles in one place"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **CSS Cursor Viewer**

Preview CSS cursor styles and behavior

## **CSS Cursor List**

Hover to preview the cursor

### **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 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:

```css
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

**How was your experience?**

Last updated: August 9, 2024

### **Related Tools**

- [<h4>**Border Radius Generator**</h4>](https://web-toolbox.dev/en/tools/border-radius-generator)
- [<h4>**Box Shadow Generator**</h4>](https://web-toolbox.dev/en/tools/box-shadow-generator)
- [<h4>**CSS Background Pattern Generator**</h4>](https://web-toolbox.dev/en/tools/css-background-pattern-generator)
- [<h4>**CSS Filter Generator**</h4>](https://web-toolbox.dev/en/tools/css-filter-generator)
- [<h4>**CSS Gradient Generator**</h4>](https://web-toolbox.dev/en/tools/css-gradient-generator)
- [<h4>**Gradient Text Generator**</h4>](https://web-toolbox.dev/en/tools/gradient-text-generator)
- [<h4>**Squircle Generator**</h4>](https://web-toolbox.dev/en/tools/squircle-generator)
- [<h4>**SVG to CSS Converter**</h4>](https://web-toolbox.dev/en/tools/svg-to-css)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/en#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"en-US","name":"Web ToolBox","url":"https://web-toolbox.dev/en","translationOfWork":{"@id":"https://web-toolbox.dev/#website"}},{"@id":"https://web-toolbox.dev/en/tools/css-cursor-viewer#webpage","@type":"WebPage","description":"Preview CSS cursor styles in one place. You can compare options such as pointer, grab, and not-allowed when choosing cursors for a UI.","name":"CSS Cursor Viewer - Preview CSS cursor styles in one place","url":"https://web-toolbox.dev/en/tools/css-cursor-viewer","breadcrumb":{"@id":"https://web-toolbox.dev/en/tools/css-cursor-viewer#breadcrumb"},"isPartOf":{"@id":"https://web-toolbox.dev/en#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/en/tools/css-cursor-viewer"]}]},{"@id":"https://web-toolbox.dev/en/tools/css-cursor-viewer#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"Preview CSS cursor styles in one place. You can compare options such as pointer, grab, and not-allowed when choosing cursors for a UI.","name":"CSS Cursor Viewer - Preview CSS cursor styles in one place","operatingSystem":"Windows, macOS, Linux, Android, iOS"},{"@id":"https://web-toolbox.dev/en/tools/css-cursor-viewer#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://web-toolbox.dev/en","position":1},{"@type":"ListItem","name":"CSS","item":"https://web-toolbox.dev/en/categories/css","position":2},{"@type":"ListItem","name":"CSS Cursor Viewer","item":"https://web-toolbox.dev/en/tools/css-cursor-viewer","position":3}]}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.