autoCSS1The browser picks the cursor for each context
cursor-autoBasicCSS Cursor Viewer
Try standard cursor shapes on the spot and take home the CSS.
Hover a card to try the cursor
defaultCSS1Platform default arrow cursor
cursor-defaultBasicnoneCSS3Hides the cursor entirely
cursor-noneBasiccontext-menuCSS3A context menu is available on right-click
cursor-context-menuAction & StatushelpCSS1Help or a tooltip is available here
cursor-helpAction & StatuspointerCSS1Indicates a clickable link or button
cursor-pointerAction & StatusprogressCSS2.1Working in the background, still interactive
cursor-progressAction & StatuswaitCSS1Busy and not accepting input
cursor-waitAction & StatuscellCSS2.1Selects table or spreadsheet cells
cursor-cellSelection & EditingcrosshairCSS1Crosshair for precise selection or drawing
cursor-crosshairSelection & EditingtextCSS1I-beam for selecting horizontal text
cursor-textSelection & Editingvertical-textCSS3I-beam for selecting vertical text
cursor-vertical-textSelection & EditingaliasCSS2.1Creates a shortcut or alias on drop
cursor-aliasDrag & MovecopyCSS2.1Drops a copy of the dragged item
cursor-copyDrag & MovemoveCSS1Moves freely in any direction
cursor-moveDrag & Moveno-dropCSS2.1The dragged item cannot be dropped here
cursor-no-dropDrag & Movenot-allowedCSS2.1Action is disabled or not permitted
cursor-not-allowedDrag & MovegrabCSS3Open hand, ready to drag
cursor-grabDrag & MovegrabbingCSS3Closed hand, currently dragging
cursor-grabbingDrag & Moveall-scrollCSS2.1Scrolls or pans in any direction
cursor-all-scrollResizecol-resizeCSS2.1Resizes column width left and right
cursor-col-resizeResizerow-resizeCSS2.1Resizes row height up and down
cursor-row-resizeResizee-resizeCSS2.1Resizes toward the east
cursor-e-resizeResizen-resizeCSS2.1Resizes toward the north
cursor-n-resizeResizene-resizeCSS2.1Resizes toward the northeast
cursor-ne-resizeResizenw-resizeCSS2.1Resizes toward the northwest
cursor-nw-resizeResizes-resizeCSS2.1Resizes toward the south
cursor-s-resizeResizese-resizeCSS2.1Resizes toward the southeast
cursor-se-resizeResizesw-resizeCSS2.1Resizes toward the southwest
cursor-sw-resizeResizew-resizeCSS2.1Resizes toward the west
cursor-w-resizeResizeew-resizeCSS2.1Resizes horizontally east and west
cursor-ew-resizeResizens-resizeCSS2.1Resizes vertically north and south
cursor-ns-resizeResizenesw-resizeCSS2.1Resizes diagonally northeast and southwest
cursor-nesw-resizeResizenwse-resizeCSS2.1Resizes diagonally northwest and southeast
cursor-nwse-resizeResizezoom-inCSS3Zooms in on click
cursor-zoom-inZoomzoom-outCSS3Zooms out on click
cursor-zoom-outZoomWhat is the CSS Cursor Viewer?#
The CSS Cursor Viewer gathers 36 standard cursor keywords in 6 categories. Each card shows a sample shape, a short explanation, and the matching Tailwind class. Hover a card to feel the real cursor, then copy the CSS or Tailwind value for your stylesheet.
How to Use#
- Pick a category tab to narrow the list.
- Hover a card to try the actual cursor shape.
- Copy the CSS or Tailwind value from the card.
Categories#
- Basic: everyday defaults.
auto,default, andnone. - Action & Status: feedback for clickable or busy elements.
pointer,wait,progress,help, andcontext-menu. - Selection & Editing: selecting text or table cells, and precise pointing.
text,vertical-text,crosshair, andcell. - Drag & Move: dragging states and drop feedback.
grab,grabbing,move,copy,alias,no-drop, andnot-allowed. - Resize: edges and corners of resizable areas. Directional keywords,
col-resize,row-resize, andall-scroll. - Zoom: click to enlarge or shrink.
zoom-inandzoom-out.
Common Use Cases#
- Giving links and buttons the hand pointer.
- Showing a waiting state during saving or exporting.
- Marking draggable cards and map areas with a grab hand.
- Indicating resizable table columns and split panes.
- Adding zoom cursors to gallery thumbnails.
FAQ#
The shape is drawn by the operating system and browser, so the same keyword renders slightly differently across environments. The sample icon is only a guide. Hover the card to see the real shape on your device.
default always shows the platform arrow. auto lets the browser decide from the context, so
text turns into an I-beam. default pins the arrow, while auto restores browser behavior.
none hides the cursor. It fits fullscreen video, games, and canvases that draw their own
pointer. An alternative pointer keeps users from losing track of the mouse position.
Yes. The copied class follows the cursor-* naming and drops straight into a class list. No
extra setup is needed.
No. Image cursors with url() are not covered. This tool lists standard keywords only.
Trying a cursor needs a hover position, which touch screens lack. Copying still works, so pick a value here and check the result on a desktop browser.
Notes#
- CSS copies as
cursor: pointer;, Tailwind copies ascursor-pointer.