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

Designing interactive web experiences requires the right visual cues, and the mouse pointer is the most direct connection between a user and your interface. However, remembering whether you need nw-resize or nwse-resize for a specific corner of a dashboard is frustrating. This tool eliminates the guesswork by providing a complete visual grid of every standard W3C cursor value. Whether you are building a drag-and-drop interface, a map application, or simply need to indicate a disabled button, this utility allows you to find the perfect cursor and grab the snippet in 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.

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.

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.”

More CSS Tools