Cursor CSS Previewer
Preview all available CSS `cursor` property values (e.g., grab, pointer, progress).
What is the Cursor CSS Previewer?
The Cursor CSS Previewer is a free interactive reference that shows every standard CSS cursor property value live, so you can hover each one to see exactly how the mouse pointer changes.
It displays a grid of more than 30 cursor keywords, including pointer, grab, not-allowed, text, the eight directional resize cursors, and zoom-in. Clicking any cursor reveals the matching CSS declaration ready to copy into your stylesheet.
The tool runs entirely in the browser with no signup. The cursors you see are rendered by your operating system and browser, so the previews match what real visitors will experience.
How to use the Cursor CSS Previewer
- 1Scan the grid of cursor boxes, each labelled with its CSS keyword and a short description.
- 2Hover over any box to see your actual mouse cursor change to that value in real time.
- 3Click a box to select it and open the CSS code panel below the grid.
- 4Copy the displayed declaration, such as cursor: pointer;, into the rule for your target element.
- 5Move your mouse over the large preview area in the code panel to test the selected cursor in a bigger space.
What you can use it for
- Choosing the right cursor for buttons, links, and other interactive elements during UI work.
- Picking grab and grabbing cursors for drag-and-drop interfaces and sortable lists.
- Confirming that disabled controls use not-allowed so the state reads clearly to users.
- Selecting directional resize cursors when building resizable panels, modals, or split views.
- Demonstrating cursor behavior to teammates or designers without writing throwaway test code.
- Looking up the exact spelling of a less common cursor keyword like context-menu or all-scroll.
Key features
- More than 30 standard CSS cursor values in one hoverable grid.
- Live cursor preview driven by your real browser and operating system.
- Click-to-select with a ready-to-copy CSS declaration for the chosen cursor.
- A larger preview surface to test the selected cursor more comfortably.
- Built-in notes on common cursor best practices for clickable, disabled, and draggable elements.
Frequently asked questions
What CSS cursor values can I preview with this tool?
The viewer covers more than 30 standard cursor keywords, including default, pointer, text, wait, progress, move, grab, grabbing, not-allowed, crosshair, zoom-in, zoom-out, copy, and the full set of directional resize cursors such as ew-resize and nwse-resize.
Which cursor should I use for a clickable button or link?
Use cursor: pointer for buttons, links, and other clickable elements. It shows a pointing hand that signals interactivity, which is the convention users expect across the web.
Why does a cursor look different on my machine than on someone else's?
CSS cursor values are rendered by the operating system and browser, not the website. The keyword is the same everywhere, but the actual pointer graphic varies between Windows, macOS, and Linux.
How do I apply a cursor value to an element?
Select a cursor in the tool, copy the generated declaration such as cursor: grab;, and add it to the CSS rule for your element. You can also set it inline with a style attribute if needed.
Is the cursor previewer free and private?
Yes. It is completely free, needs no account, and runs entirely in your browser. No data is collected or sent to a server while you preview cursors.