CSS Cursor Viewer

Explore, test, and copy CSS cursor values for your web designs.

Tools
CSS Cursor Viewer
Add to Favorites Remove from Favorites Share on Facebook Share on X

Test Area

Select a cursor from the list below or use the dropdown to test it here.

Hover here to test: auto

General & Status

Copy
auto Browser determines cursor
Copy
default Standard arrow
Copy
none Cursor disappears
Copy
context-menu Context menu available
Copy
help Help information available
Copy
pointer Link / Clickable
Copy
progress Processing in background
Copy
wait Busy / Loading

Selection & Dragging

Copy
cell Table cell selection
Copy
crosshair Precise selection
Copy
text Selectable text
Copy
vertical-text Vertical text selection
Copy
alias Creating a shortcut
Copy
copy Copying item
Copy
move Move item
Copy
no-drop Drop not allowed here
Copy
not-allowed Action not permitted
Copy
grab Can be grabbed
Copy
grabbing Currently grabbing

Resizing & Scrolling

Copy
all-scroll Scroll in any direction
Copy
col-resize Resize column
Copy
row-resize Resize row
Copy
n-resize North resize
Copy
e-resize East resize
Copy
s-resize South resize
Copy
w-resize West resize
Copy
ne-resize North-East resize
Copy
nw-resize North-West resize
Copy
se-resize South-East resize
Copy
sw-resize South-West resize
Copy
ew-resize Bidirectional East-West
Copy
ns-resize Bidirectional North-South
Copy
nesw-resize Bidirectional NE-SW
Copy
nwse-resize Bidirectional NW-SE

Zooming

Copy
zoom-in Zoom in
Copy
zoom-out Zoom out
Copied!

Supercharge Your Toolkit with the PHP Bundle

Save over 60% on a huge collection of website scripts for developers, freelancers, and businesses.

View The Bundle →

About the CSS Cursor Viewer

The mouse cursor is a fundamental part of user experience (UX) design. It provides visual feedback to users, telling them what actions are possible on a specific element. For example, the "pointer" hand tells you something is clickable, while the "not-allowed" circle tells you an action is disabled. Choosing the right cursor makes your website feel intuitive and responsive.

The CSS Cursor Viewer is a visual reference guide designed to help developers and designers instantly find the perfect cursor style. Instead of guessing what `ns-resize` or `context-menu` looks like on your specific browser, you can simply hover over the boxes in our grid to see the live rendering of that cursor.

We have organized the cursors into logical categories like Status, Selection, Resizing, and Zooming. Once you find the one you need, simply click the box to copy the exact CSS code (e.g., `cursor: pointer;`) directly to your clipboard, ready to paste into your stylesheet.

Common Cursor Types

  • Pointer: The most common custom cursor. Use this for links, buttons, and interactive elements.
  • Wait / Progress: Use these when the application is busy loading data or processing an action.
  • Grab / Grabbing: Essential for drag-and-drop interfaces or carousel sliders.
  • Not-Allowed: Perfect for disabled buttons or form fields to indicate interaction is blocked.
  • Text: Automatically appears on text, but useful to force on custom input fields or editable areas.
  • Zoom-In / Zoom-Out: Great for image galleries and lightboxes.

Frequently Asked Questions

How do I change the cursor in CSS?

You use the `cursor` property in your CSS file. For example, to make a div look clickable, you would write: .my-div { cursor: pointer; }.

Can I use a custom image as a cursor?

Yes! You can use a URL to an image file (PNG, SVG, CUR). The syntax is: cursor: url('custom.png'), auto;. Always include a fallback keyword like 'auto' or 'default' at the end, otherwise, the custom cursor will not work.

What is the default cursor?

The default cursor is usually an arrow pointer, defined by the keyword `default`. However, browsers automatically change this to `text` (I-beam) over paragraphs or `pointer` (hand) over links unless you override it.

Why isn't my custom cursor working?

If you are using an image, ensure the file path is correct and the image isn't too large (browsers often limit cursor size to 32x32 or 128x128). Also, remember to include the fallback keyword (e.g., `, auto`) after the URL.

What are the resize cursors used for?

Resize cursors (e.g., `n-resize`, `ew-resize`) appear on the edges of windows or text areas. In web apps, they are used for split-pane handles, resizable columns, or cropping tools to indicate the direction the element can be stretched.

Tools