HomeToolsCSS Cursor

CSS Cursor

Visual CSS cursor property reference

Hover here to test
cursor: auto;

Use these tools directly in Chrome

Install the DailyDevTools extension — access all tools from your browser toolbar

Add to Chrome

What is CSS Cursor?

CSS provides 30+ cursor property values that control what the mouse cursor looks like when hovering over an element. Choosing the right cursor communicates affordance — users expect a pointer on clickable elements, a text cursor on editable fields, and a grab cursor on draggable items. DailyDevTools' CSS Cursor reference shows a live interactive demo of every cursor value with its CSS syntax.

How to use CSS Cursor

  1. 1Hover over any cursor swatch to see the cursor change in real-time
  2. 2Click a cursor name to copy its CSS syntax (cursor: pointer;) to your clipboard
  3. 3Browse by category: General, Link, Status, Selection, Drag, Resize, and Zoom cursors
  4. 4Use the custom cursor section to generate CSS for a custom cursor from an image URL

Frequently asked questions

Comments

You might also like

Explore other popular developer tools

CSS Minifier

Minify and optimize your CSS code

Color Converter

Convert Hex, RGB, HSL and CMYK

Gradient Generator

Create beautiful CSS gradients

Image Compressor

Compress images locally & privately