How many CSS cursors are there?

CSS defines approximately 40 cursor values including pointer, crosshair, grab, text, wait, help, not-allowed, zoom-in, zoom-out, and directional resize cursors (n-resize, ne-resize, etc.).

CSS Cursor Gallery — All Types

What Is the CSS Cursor Gallery?

Browse and preview all built-in CSS cursor values in one interactive gallery. See how each cursor looks on your operating system.

Why Use This Tool?

CSS offers over 30 cursor values, but most developers only use 'pointer' and 'default'. This gallery shows every available cursor with live previews, so you can choose the right cursor for each interaction type.

How to Use This CSS Cursor Gallery

Browse the cursor gallery — Scroll through all available CSS cursor types, organized by category — general, links, status, selection, drag, and resize.
Hover to preview — Move your mouse over any cursor card to see how that cursor looks in real time.
Click to copy — Click any cursor card to copy the CSS cursor property declaration to your clipboard.
Use in your stylesheets — Paste the cursor value into your CSS to apply it to any element — buttons, links, draggable items, or custom interactive areas.

Tips and Best Practices

→ Match cursor to interaction. Use pointer for clickable elements, grab/grabbing for draggable items, text for selectable text, and not-allowed for disabled actions.
→ Don't change the default cursor without reason. Users expect the default arrow cursor on most of the page. Changing it globally or on non-interactive elements creates confusion.
→ Use wait and progress for loading states. Use wait when the user can't interact at all (full-page loading) and progress when they can still interact while something loads in the background.
→ Custom cursors are possible. You can use custom images with cursor: url('cursor.png'), auto. Always provide a fallback keyword. Keep custom cursors under 32×32px for best compatibility.

Frequently Asked Questions

How many CSS cursor values are there?

CSS defines over 30 cursor values including pointer, text, grab, grabbing, crosshair, not-allowed, wait, progress, help, move, and various resize handles.

Can I use custom cursor images?

Yes. The CSS cursor property accepts URL values: cursor: url('custom.png') 12 12, auto; — where 12 12 is the hotspot position and auto is the fallback.

Do cursors look the same across operating systems?

No. Cursor appearance varies between Windows, macOS, and Linux. The cursor value names are standardized but the visual rendering is OS-specific.

How many CSS cursor types are there?+

CSS defines over 35 cursor values including default, pointer, text, wait, progress, help, crosshair, move, grab, grabbing, and various resize cursors (n-resize, e-resize, etc.). All modern browsers support the full set.

Can I use a custom image as a CSS cursor?+

Yes, use the syntax cursor: url('path/to/cursor.png') 0 0, auto where the numbers set the hotspot coordinates and auto is the fallback. Supported formats include PNG, SVG, and CUR files. Keep images small (32×32px maximum) for best compatibility.

What is the difference between pointer and default cursor?+

The default cursor is the standard arrow shown on most of the page. The pointer cursor (the pointing hand) indicates a clickable element like a link or button. Using pointer on non-clickable elements misleads users into thinking they can interact with something.

📖 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools