What is the CSS cursor property?

The CSS `cursor` property specifies the mouse cursor style to be displayed when the mouse pointer is positioned over a given HTML element (for example, showing a hand pointer over clickable buttons or a text I-beam over editable paragraphs).

What is the difference between cursor: grab and cursor: grabbing?

`cursor: grab` indicates that an element can be grabbed or dragged (usually rendered as an open hand). `cursor: grabbing` indicates that an element is currently being dragged (rendered as a closed fist).

Are all 35+ cursor values supported in all modern browsers?

Yes. Standard values like `pointer`, `default`, `text`, `not-allowed`, `crosshair`, `grab`, and `zoom-in` have universal cross-browser support across Chrome, Safari, Firefox, and Edge.

Does this tool generate Tailwind CSS cursor classes?

Yes. For every cursor, the corresponding Tailwind CSS utility class (such as `cursor-pointer`, `cursor-not-allowed`, or `cursor-move`) is provided.

Is this tool completely free and private?

Yes. Everything runs 100% client-side in your web browser using vanilla HTML/CSS and JavaScript with zero tracking.

CSS Cursor Tester & Code Generator

Interactive testing pad and CSS / Tailwind code generator for all 35+ standard CSS cursor values.

100% free
Private in browser
No signup
No watermarks

Live Cursor Testing Sandbox

Hover over this box to test: pointer

Click around or drag inside this box to inspect feel

Active Code: pointer

cursor: pointer;class="cursor-pointer"

General & Interactive (8)

Selection & Editing (7)

Drag & Drop (5)

Zooming (2)

Resizing & Scrolling (14)

Rate this tool

Be the first to rate — helps others and improves this page.

About CSS Cursor Tester & Code Generator

The CSS Cursor Tester & Code Generator allows web designers and frontend engineers to visually interact with all 35+ standard CSS mouse cursor property values. Hover over any tile to preview the real operating system cursor transformation live, and copy production-ready CSS (`cursor: grab;`) or Tailwind utility classes (`cursor-grab`) with a single click.

How to use CSS Cursor Tester & Code Generator

Hover your mouse over the interactive cursor cards to inspect real-time pointer rendering.
Click on any cursor value to select it into the active testing playground sandbox.
Test dragging or clicking behavior inside the large interactive canvas pad.
Copy the clean CSS rule or Tailwind CSS utility class directly to your clipboard.

Key features

Full interactive catalog of all 35+ standard CSS `cursor` values
Categorized by General (pointer, default), Selection (text, crosshair), Drag & Drop (grab, move), and Resizing
Generates both vanilla CSS rules (`cursor: zoom-in;`) and modern Tailwind classes (`cursor-zoom-in`)
Large live interactive hover testing playground

Frequently asked questions

What is the CSS cursor property?: The CSS `cursor` property specifies the mouse cursor style to be displayed when the mouse pointer is positioned over a given HTML element (for example, showing a hand pointer over clickable buttons or a text I-beam over editable paragraphs).
What is the difference between cursor: grab and cursor: grabbing?: `cursor: grab` indicates that an element can be grabbed or dragged (usually rendered as an open hand). `cursor: grabbing` indicates that an element is currently being dragged (rendered as a closed fist).
Are all 35+ cursor values supported in all modern browsers?: Yes. Standard values like `pointer`, `default`, `text`, `not-allowed`, `crosshair`, `grab`, and `zoom-in` have universal cross-browser support across Chrome, Safari, Firefox, and Edge.
Does this tool generate Tailwind CSS cursor classes?: Yes. For every cursor, the corresponding Tailwind CSS utility class (such as `cursor-pointer`, `cursor-not-allowed`, or `cursor-move`) is provided.
Is this tool completely free and private?: Yes. Everything runs 100% client-side in your web browser using vanilla HTML/CSS and JavaScript with zero tracking.