CSS Cursor Viewer
Hover over the cards below to test every native CSS cursor property available in modern browsers. Click any card to instantly copy the CSS code.
How to Use
- Move your mouse over any of the cards in the grid above to instantly preview how the browser renders that specific
cursorproperty on your operating system. - Once you find the perfect cursor for your UI interaction (like
graborzoom-in), click the card. - The perfectly formatted CSS string (e.g.,
cursor: grab;) will automatically copy to your clipboard, ready to paste into your stylesheet.
Features
Live Hover Preview
Instantly see the exact visual representation of the cursor natively on your OS.
One-Click Copy
Forget typing out complex resize cursor names. Click to copy the CSS property instantly.
Complete List
Features all 35+ standard CSS cursors available in modern web browsers.
Zero Dependencies
Pure HTML and CSS rendering. No massive libraries or external images.
Why use custom CSS cursors?
The mouse cursor is one of the most critical feedback mechanisms in User Interface (UI) design. By default, the browser changes the cursor to a pointer (the hand icon) when hovering over a link, and text (the I-beam) when hovering over a paragraph.
However, when building complex web applications, you need to provide users with more context. For example, if you build a map application, changing the cursor to grab indicates that the map can be dragged. If an API request is loading, changing the button cursor to wait or progress stops the user from clicking it twice. If a form field is disabled, using the not-allowed cursor instantly communicates that the element cannot be interacted with.
The Frontend Developer Suite
CSS Cursors are just one part of building a great UI. Ensure your interactive elements have appropriate shadows using our Box Shadow Generator. If you need to build custom tooltip arrows for your hover states, use the CSS Triangle Generator. Finally, refine your color palette with our Color Format Converter.
Frequently Asked Questions
Why do some cursors look different on Windows vs Mac?
The CSS cursor property asks the user's Operating System to provide the visual icon. Windows, macOS, and Linux all have their own native icon sets, meaning cursor: help; might look like a question mark on Windows, but something slightly different on macOS.
Can I use a custom image as a cursor?
Yes! While this tool focuses on the native browser cursors, CSS allows you to load an image using the syntax: cursor: url('custom.png'), auto;. The auto acts as a fallback if the image fails to load.
What is the difference between grab and grabbing?
grab indicates that an element (like a slider or map) *can* be dragged. grabbing is typically applied via JavaScript on the :active state to indicate that the item is *currently* being dragged.
Is it free?
Yes, 100% free with no limits.