CSS Cursor Properties Explorer

Mobile Device Detected

You’re using a touch device where cursor previews aren’t available. You can still browse cursor options and copy the CSS code for use in your projects.

This interactive tool helps you explore and experiment with all available CSS cursor properties. See live previews of each cursor type and generate ready-to-use CSS code with a single click.

Simply select a cursor from the grid to see it in action in the preview area, then copy the generated CSS to use in your projects.

Want custom cursors? Try our advanced cursor creator to upload and generate custom cursor CSS for your website.

Hover over this area to see the selected cursor

Generated CSS Code

Practical Examples

Common cursor usage in web elements:

Clickable Button (pointer)

Loading State (wait)

Draggable Item (move)

Text Input (text)

How to Use This Tool

Browse cursor options – Explore the grid of available CSS cursor values
Select a cursor – Click on any cursor to see it in action
Test the cursor – Hover over the preview area to see how it behaves
Copy the CSS – Use the generated code in your stylesheets
Implement in your project – Apply the cursor style to your HTML elements

Frequently Asked Questions

What is the CSS cursor property?

The cursor property specifies the mouse cursor to display when pointing over an element. It helps indicate interactivity and functionality to users.

Can I use custom cursor images?

Yes! You can specify a URL to a custom cursor image with optional fallback values: cursor: url('my-cursor.png'), auto;

Why are some cursors not working on my site?

Browser support varies for some cursor values, especially on mobile devices. Always test on your target platforms.

What’s the most commonly used cursor?

The pointer cursor (hand icon) is most common for clickable elements like buttons and links.

Detailed Cursor Information

Basic Cursors

default – Standard arrow cursor
pointer – Hand indicating clickable element
text – I-beam for text selection
move – Cross with arrows for draggable items

State Indicators

wait/hourglass – System is busy
not-allowed – Action not permitted
progress – Action in progress
help – Help is available

Resize Cursors

Used for indicating resizable elements:

n-resize, e-resize, etc. – Directional arrows
nesw-resize, nwse-resize – Diagonal arrows
col-resize, row-resize – Column/row resizing

Advanced Cursors

zoom-in/zoom-out – Magnifying glass icons
grab/grabbing – Hand icons for drag interactions
context-menu – Indicates right-click menu availability