Our CSS Cursor Viewer lets you visually preview every available cursor property—from standard pointers to complex resize handles—and instantly copies the code for your project.

CSS Output

CSS CODE

.element {
    cursor: auto;
}

Select a cursor

Related Tools

About This CSS Cursor Viewer

When building a website, small details make a massive difference. One of the most overlooked details is the mouse cursor.

A mouse cursor tells users what they can click, where they can drag, and when they need to wait. If you use the wrong cursor, your visitors will get confused. Confused visitors leave websites quickly.

Our CSS Cursor Viewer is designed to solve this problem. It lets you test every major CSS cursor property with a single click.

How to Use This CSS Cursor Viewer

Using this tool is incredibly straightforward. We’ve designed it to be a “click-and-get” solution for developers.

Browse the Grid: Look through the buttons below. They are organized by functionality (general, resizing, zooming, grabbing, etc.).
Select a Style: Click on any button, such as pointer, crosshair, or zoom-out.
Preview the Code: The “CSS Output” box at the top will instantly update to reflect your choice.
Copy and Paste: Click the “Copy” button inside the code box to save the CSS rule to your clipboard, then paste it directly into your project’s .css file.

Pro Tip: Always preview your cursors on different operating systems if possible. Windows, macOS, and Linux often render these standard cursors with slightly different visual designs.

Use Cases Of CSS Cursor Viewer

Why would you need to change the cursor? Here are a few real-world scenarios:

Interactive Maps: Use grab and grabbing to let users know they can click and drag to move around a map view.
Image Galleries: Use zoom-in and zoom-out on lightboxes so users understand they can inspect an image closer.
Dashboards & Resizing: If you are building a UI where users can resize columns or windows, you need precise directional cursors like col-resize or nesw-resize.
Form Validation: Use not-allowed or no-drop to visually indicate that a “Submit” button is disabled until the form is filled out correctly.

Quick Reference: Common CSS Cursors and When to Use Them

To help you design better interfaces, here is a breakdown of the most common cursor types and their correct use cases:

Cursor Value	Visual Meaning	Best Used For
`default`	Standard arrow	Neutral background areas, non-interactive text blocks.
`pointer`	Hand with a pointing finger	Links, buttons, tabs, and clickable UI elements.
`not-allowed`	Circle with a slash through it	Disabled buttons, blocked actions, or locked form inputs.
`grab` / `grabbing`	Open hand / Closed fist	Draggable items, sliders, maps, or reorderable lists.
`wait` / `progress`	Hourglass or spinning wheel	Background processing, loading screens, or form submissions.
`zoom-in` / `zoom-out`	Magnifying glass with + or –	Thumbnail images, gallery popups, or map views.

Why Getting Your Cursors Right Matters for SEO and UX

Google cares deeply about User Experience (UX). Search engines track how users interact with your pages. If users find your site frustrating or confusing, your dwell time drops, and your bounce rate climbs. This can hurt your search engine rankings.

1. Visual Clarity and Intuitive Design

Users expect a website to react predictably. When a user hovers over a button and the cursor changes to a pointer, their brain instantly recognizes that the element is interactive. If the cursor stays a default arrow, they might think the button is broken and click away.

2. Enhancing Web Accessibility (WCAG)

Good design is inclusive design. For users with cognitive disabilities or those using specific assistive technologies, visual cues like changing cursors are essential. For example, using not-allowed on a disabled form submission button provides an immediate visual barrier, preventing useless clicks.

3. Clear Feedback During Loading States

If a user clicks a “Submit Payment” button and nothing happens for three seconds, they will click it again. This can cause double charges. By switching the cursor to wait or progress the moment the button is clicked, you communicate to the user that the system is processing their request.

Frequently Asked Questions (FAQs)

What is the default cursor in CSS?

The default cursor is usually auto. This tells the browser to determine the best cursor based on the context. For example, it will show a text beam (I-beam) over text and a standard arrow pointer over empty space or backgrounds.

Can I use a custom image as a cursor?

Yes, CSS allows for custom cursors using url('image.png'), auto;. However, this tool focuses on standard keywords because they are performance-friendly and require no external assets. If you use a custom image, always provide a standard keyword as a fallback.

What is the difference between ‘wait’ and ‘progress’?

While both indicate loading, wait usually turns the cursor into a spinner or hourglass, indicating the program is busy and the user cannot interact with it. The progress cursor indicates that background work is happening, but the user can still interact with other parts of the interface.

Why isn’t my cursor changing when I hover?

If you applied the CSS but don’t see the change, check if another CSS rule is overriding it with !important. Also, ensure you are actually hovering over the element where the class is applied.

Which cursor should I use for a clickable button?

The industry standard for buttons, links, and clickable elements is pointer. This turns the arrow into a hand with a pointing finger, universally understood as “click me.”

What is the difference between the `auto` and `default` cursor values?

The default value forces the browser to display its standard platform arrow cursor, no matter what element is hovered. The auto value allows the browser to make a smart context-based guess. For example, if you hover over text with cursor: auto;, the browser automatically changes it to a text selection I-beam (text).

Why don’t CSS cursors work or show up on mobile devices or tablets?

Mobile phones and tablets use touchscreen interfaces, which rely on direct finger taps rather than a hovering pointer. Because there is no active mouse pointer tracking movement across the screen, all cursor CSS properties are ignored by mobile browsers.

How do I create a custom image or emoji cursor using CSS?

You can use an external image file (like a PNG or SVG) by referencing its URL path inside the cursor property.

CSS

.custom-hover {
  cursor: url('custom-pointer.png'), auto;
}

Always include a generic fallback keyword like auto or pointer at the end of the declaration. If your image file fails to load, the browser will use the fallback instead.

What are the recommended image dimensions for a custom CSS cursor?

Keep custom cursor images small. The maximum standard size supported by most modern browsers is 32×32 pixels. Anything larger than 128×128 pixels will generally be ignored by the browser entirely, or it will severely slow down page rendering.

Can I use CSS cursors to improve my form validation UX?

Yes. You can pair CSS cursors with pseudo-classes like :disabled or :invalid. For example, applying cursor: not-allowed; to a submit button when a form is incomplete gives users immediate visual feedback that they need to fix errors before proceeding.