ffee
All tools
CSS Cursor Preview
Hover a tile to try every CSS cursor value and read the matching rule.
Try every cursor value
Showing — cursor values · hover a tile to try it and read
its rule
How to use the CSS Cursor Preview
- Hover any tile to see the real cursor inside it and its rule in the CSS box.
- Type in the filter box to narrow the list to resize, zoom, text or other families.
- Copy the rule and apply the cursor keyword to your own element.
Features
- Every standard CSS cursor keyword in one grid
- Hover areas that show the real pointer for each value
- Filter box and adjustable tile height
- Matching CSS rule written for the tile you hover
Advertisement
Frequently Asked Questions
Common questions about the free online css cursor preview.
It changes the mouse pointer while it is over an element, so the pointer can hint that
something is clickable, resizable or busy.
Use pointer for anything clickable. It is the familiar hand cursor that visitors expect from
links and buttons.
Grab shows an open hand for a draggable area, and grabbing shows a closed hand while the item
is actually being dragged.
It hides the pointer completely over that element, which is useful for custom cursors, games
and full screen media players.
Each direction has its own keyword, such as n-resize for a top edge and ew-resize for a left
or right edge, so the pointer matches the drag axis.
Yes. A url value points at an image, followed by a fallback keyword such as pointer for
browsers that cannot load the image.
No. Touch screens have no pointer, so cursor values simply have no visible effect there and
should never carry essential meaning.
Yes. It is completely free, runs locally in your browser and needs no account, no sign-up and
no upload.
Last updated: October 10, 2026