CSS Cursor Style Previewer

Test and preview all CSS cursor types with interactive examples and code generation

All Cursor Types

basic Cursors (2)

auto

basic

Browser determines cursor based on context

auto

default

basic

Default arrow cursor

default

special Cursors (6)

none

special

No cursor visible

none

crosshair

special

Crosshair cursor for precise selection

crosshair

cell

special

Cell selection cursor

cell

all-scroll

special

All-direction scroll cursor

all-scroll

no-drop

special

Invalid drop target cursor

no-drop

not-allowed

special

Action not allowed cursor

not-allowed

interactive Cursors (5)

pointer

interactive

Hand pointer for clickable elements

pointer

help

interactive

Question mark or help cursor

help

context-menu

interactive

Context menu available cursor

context-menu

progress

interactive

Background process running

progress

wait

interactive

System busy, wait cursor

wait

text Cursors (2)

text

I-beam cursor for text selection

text

vertical-text

text

Vertical text selection cursor

vertical-text

drag Cursors (5)

grab

drag

Open hand for grabbable elements

grab

grabbing

drag

Closed hand while dragging

grabbing

move

drag

Four-way arrow for moving

move

copy

drag

Copy operation cursor

copy

alias

drag

Alias/shortcut creation cursor

alias

resize Cursors (14)

col-resize

resize

Column resize cursor

col-resize

row-resize

resize

Row resize cursor

row-resize

n-resize

resize

North resize cursor

n-resize

e-resize

resize

East resize cursor

e-resize

s-resize

resize

South resize cursor

s-resize

w-resize

resize

West resize cursor

w-resize

ne-resize

resize

Northeast resize cursor

ne-resize

nw-resize

resize

Northwest resize cursor

nw-resize

se-resize

resize

Southeast resize cursor

se-resize

sw-resize

resize

Southwest resize cursor

sw-resize

ew-resize

resize

East-west resize cursor

ew-resize

ns-resize

resize

North-south resize cursor

ns-resize

nesw-resize

resize

Northeast-southwest resize cursor

nesw-resize

nwse-resize

resize

Northwest-southeast resize cursor

nwse-resize

zoom Cursors (2)

zoom-in

zoom

Zoom in cursor

zoom-in

zoom-out

zoom

Zoom out cursor

zoom-out

Generated CSS

pointer

Hand pointer for clickable elements

Use case: Links, buttons, clickable elements

CSS Property

cursor: pointer;

CSS Rule

.element { cursor: pointer; }

How to Use the CSS Cursor Style Previewer

1. Browse Cursor Types

Explore our comprehensive collection of CSS cursor types organized by categories:

Basic: auto, default, none
Interactive: pointer, help, context-menu, progress, wait
Text: text, vertical-text
Drag: grab, grabbing, move, copy, alias
Resize: All directional resize cursors
Zoom: zoom-in, zoom-out
Special: crosshair, cell, all-scroll, no-drop, not-allowed

2. Test in Preview Area

Move your mouse over the large preview area to see how each cursor looks and behaves. The draggable element helps you test grab and grabbing cursors in action.

3. Interactive UI Testing

Test cursors on real UI elements like buttons, inputs, links, and draggable components to understand how they work in practical scenarios.

4. Copy CSS Code

Get the exact CSS code for any cursor style. Copy individual properties or complete CSS rules ready to paste into your stylesheets.

Complete Guide to CSS Cursors

Understanding CSS Cursor Property

The CSS cursor property specifies the mouse cursor to be displayed when pointing over an element. It's essential for creating intuitive user interfaces that guide user interactions.

Basic Syntax:

cursor: pointer;

When to Use Different Cursors

pointer

Links, buttons, clickable elements

text

Text inputs, editable content

grab/grabbing

Draggable elements, maps

resize cursors

Resizable elements, table columns

wait/progress

Loading states, processing

not-allowed

Disabled elements, forbidden actions

crosshair

Drawing tools, precise selection

zoom-in/zoom-out

Image viewers, maps

Custom Cursors

You can use custom cursor images with the url() function:

cursor: url('custom-cursor.png') 10 10, pointer;

The numbers (10 10) specify the hotspot coordinates, and 'pointer' is the fallback cursor.

CSS Cursor Best Practices

Use Semantic Cursors

Choose cursors that match the expected interaction (pointer for clickable, text for editable)

Provide Fallbacks

Always include fallback cursors for custom cursor images

Consider Accessibility

Ensure cursor changes are meaningful and don't confuse users with disabilities

Test Across Browsers

Cursor appearance can vary between browsers and operating systems

Optimize Custom Cursors

Keep custom cursor files small (under 32x32px) for best performance

Frequently Asked Questions

What are CSS cursors?

CSS cursors are visual indicators that show what action will occur when a user interacts with an element. They provide important visual feedback and improve user experience by indicating clickable areas, text fields, draggable elements, and more.

How many cursor types are available in CSS?

CSS provides over 30 standard cursor types, including basic cursors (auto, default), interactive cursors (pointer, help), text cursors, drag cursors, resize cursors, zoom cursors, and special cursors. You can also use custom cursor images.

Can I use custom cursor images?

Yes! You can use custom cursor images in PNG, SVG, or ICO format. Use the url() function with hotspot coordinates and always provide a fallback cursor. Keep images small (32x32px or less) for optimal performance.

Do cursors look the same across all browsers?

While all modern browsers support standard CSS cursors, the exact appearance may vary between browsers and operating systems. It's important to test your cursor implementations across different platforms to ensure consistent user experience.

When should I use the 'grab' vs 'grabbing' cursor?

Use 'grab' (open hand) to indicate that an element can be dragged, and 'grabbing' (closed hand) during the actual drag operation. This provides clear visual feedback about the current state of the interaction.

How do I make cursors accessible?

Ensure cursor changes are meaningful and consistent with user expectations. Don't rely solely on cursor changes to convey important information. Provide additional visual cues like hover states, and ensure your interface works well with keyboard navigation.

Technical Implementation

CSS Cursor Syntax

Basic cursor:

.element { cursor: pointer; }

Custom cursor with fallback:

.element { cursor: url('cursor.png') 10 10, pointer; }

Multiple fallbacks:

.element { cursor: url('cursor.png'), url('fallback.cur'), pointer; }

JavaScript Cursor Control

// Change cursor dynamically
element.style.cursor = 'pointer';

// During drag operations
element.addEventListener('mousedown', () => {
  element.style.cursor = 'grabbing';
});

element.addEventListener('mouseup', () => {
  element.style.cursor = 'grab';
});

Related Tools

🎨

CSS Filter Tester

Test CSS image filters with live preview, upload support, presets, and copy-ready filter code

Try it now→

🎬

CSS Animation Previewer

Preview CSS timing functions and cubic-bezier curves with live playback and copy-ready animation code

Try it now→

💎

Neumorphism Generator

Generate raised and pressed neumorphic UI styles with live preview and copy-ready CSS output

Try it now→