© 2026 ZAP-Hosting GmbH
Preferred source on GoogleYou decide which services we may enable for analytics, personalization, and external content.
We use cookies and similar technologies on our website to personalize content, embed external media, and better understand how individual areas are used.
Necessary cookies
These entries support essential functions such as security, stability, and form processing.
Optional sections
Your data may be processed with your consent or on the basis of legitimate interests. In the cookie settings, you can reject or explicitly allow each optional category.
Some services process personal data in third countries. By consenting, you also agree to this transfer. You can find more information in our Privacy Policy.
You can reopen and change your selection at any time. · 1.0.2
The CSS Cursor Viewer shows all 36 values of the CSS cursor property, sorted by purpose and displayed using your system’s actual mouse pointer. Hover over not-allowed, for example, to see the circle with a slash, then copy cursor: not-allowed; with one click. Free, no sign-up required; everything runs in your browser.
Built by Justin Schuessler
Code ready? Take your site online with fast, reliable web hosting.
Use case
36 of 36 values
The preview shows the cursor as rendered by your operating system and browser. Many cursors therefore look different on macOS, Windows, and Linux.
autoThe browser chooses automatically, e.g. a text cursor over text and an arrow beside it. This is the default.
defaultThe standard arrow, even over text. For areas that are not clickable.
noneHides the mouse pointer, e.g. for full-screen videos, games, or a custom cursor.
pointerThe pointing hand for links, buttons, and anything else clickable.
helpA question mark next to the arrow when help is available, e.g. for an info icon with a tooltip.
context-menuIndicates that a context menu is available, e.g. for elements with their own right-click menu.
progressArrow with a loading icon: Something is loading in the background, but the page remains usable.
waitLoading icon without an arrow: The interface is blocked until the operation is complete.
textThe text cursor (I-beam) for input fields and selectable text.
vertical-textThe horizontal text cursor for vertically oriented text, e.g. with writing-mode: vertical-rl.
cellA thick plus sign for selectable spreadsheet cells.
crosshairCrosshairs for precision work, e.g. canvases, color pickers, or image cropping.
grabOpen hand for draggable elements, e.g. maps, list items, or sliders.
grabbingA closed hand while an element is being dragged.
moveFour-way arrow for elements you can move freely, e.g. windows or widgets.
copyArrow with a plus sign: Dropping creates a copy, e.g. when dragging files.
aliasArrow with a shortcut icon: Dropping creates a link or shortcut.
no-dropThe dragged element cannot be dropped here, e.g. outside a drop zone.
not-allowedA crossed-out circle for disabled buttons and actions that are currently unavailable.
col-resizeAdjust column width, e.g. at dividers between table columns or split views.
row-resizeAdjust row height, e.g. at horizontal dividers between two areas.
n-resizeDrag the top edge to expand an element upward.
e-resizeDrag the right edge to expand an element to the right.
s-resizeDrag the bottom edge to expand an element downward.
w-resizeDrag the left edge to expand an element to the left.
ne-resizeDrag the top-right corner to change the width and height.
nw-resizeDrag the top-left corner to change the width and height.
se-resizeDrag the bottom-right corner to change the width and height.
sw-resizeDrag the bottom-left corner to change the width and height.
ew-resizeResize horizontally in both directions, e.g. on a horizontal slider or splitter.
ns-resizeResize vertically in both directions, e.g. on a vertical splitter.
nesw-resizeDrag diagonally from top right to bottom left, e.g. at the corner of a panel.
nwse-resizeDrag diagonally from top left to bottom right, e.g. using the handle at the bottom right of a panel.
all-scrollArrows in all directions: You can scroll the content in any direction, e.g. a map.
zoom-inMagnifying glass with a plus sign for images or maps you can click to enlarge.
zoom-outMagnifying glass with a minus sign for clicking to zoom out of an enlarged image.
Hover over the examples, drag the card, divider, and panel corner, and click the image.
pointernot-allowedRead more in the Documentation.
pointertextCard
Drag to move
grabgrabbingcol-resizePanel
160 Ă— 80 px
nwse-resizeLoading in the background
You can keep working.
Please wait
This area is blocked.
progresswaitzoom-inzoom-outOverview
The CSS cursor property determines which mouse pointer appears when you hover over an element. It shows what you can do there: the hand for pointer means clickable, the text cursor means selectable, and the crossed-out circle for not-allowed means unavailable. If omitted, auto applies and the browser decides.
One keyword per rule is enough. States like :disabled or :active get their own cursor:
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
.card[draggable="true"] {
cursor: grab;
}
.card[draggable="true"]:active {
cursor: grabbing;
}Utility classes such as cursor-pointer in Tailwind CSS set the same declaration, cursor: pointer;. The tool itself copies plain CSS, not classes.
The CSS specification defines 36 keywords, from auto and pointer to the 14 resize cursors. This tool shows them all, grouped by use case.
cursor applies to an element and all its children until a child sets its own value. So cursor: pointer on a container also affects the text inside it.
CSS only determines which cursor appears. Its appearance depends on the operating system and browser, so it looks different on macOS, Windows, and Linux.
The cursor only appears while the mouse is over the element anyway. Set cursor directly on the element; you don’t need a separate :hover rule.
Cursor types
The tool sorts the values of the CSS cursor property into six groups by purpose. Use the purpose filter to show just one group.
The default value auto, the normal arrow default, and none, which hides the mouse pointer.
autodefaultnone
The hand for clickable elements, help, context menus, and the two loading states progress and wait.
pointerhelpcontext-menuprogresswait
Horizontal and vertical text cursors, the plus sign for table cells, and the crosshair for precise work.
textvertical-textcellcrosshair
Open and closed hands, the move cursor, and drop feedback: copy, link, no-drop and not-allowed.
grabgrabbingmovecopyaliasno-dropnot-allowed
14 resize cursors for edges, corners, columns and rows, from n-resize to nwse-resize.
col-resizerow-resizen-resizee-resizes-resizew-resizene-resizenw-resizese-resizesw-resizeew-resizens-resizenesw-resizenwse-resize
Scrolling in all directions, and the zoom-in and zoom-out magnifier cursors for images and maps.
all-scrollzoom-inzoom-out
Best practices
A cursor makes a promise to the user. These rules help you keep it.
The hand promises that clicking will do something. Use it for links, buttons, and clickable cards, but not for text or areas with no action.
A disabled button gets cursor: not-allowed. Note: With pointer-events: none, no cursor appears because the element does not receive mouse events.
Use grab for draggable elements. While dragging, switch to grabbing, for example via :active or a class set by your script.
Input fields already have a text cursor. Set text yourself only where content can actually be selected or edited.
Use progress when something loads in the background and the page remains usable. Use wait only when the interface is actually blocked.
An invisible mouse pointer is confusing. cursor: none is suitable for games, full-screen videos, or a custom cursor that replaces the system pointer.
How it works
Three steps, no account or installation required.
Step 1
Search for a value, a use case such as resize or drag, or a state such as disabled—or filter by group.
Step 2
Hover over a tile’s preview area or interact with the examples in the test area to see your system’s actual cursor.
Step 3
Click Copy to place just the declaration on your clipboard, e.g. cursor: not-allowed;. Paste it into your CSS rule.
Custom cursors
Instead of a keyword, you can use a custom image as your cursor. The image URL can be followed by optional hotspot coordinates—the point that clicks. Always end with a fallback keyword in case the image fails to load.
.canvas {
cursor:
url("/cursors/pencil.svg") 2 30,
crosshair;
}PNG or SVG work well. Browsers display custom cursors only up to 128Â Ă—Â 128 pixels; 32Â Ă—Â 32 is common. A cursor image should make the click point clear.
Discover more
Format, indent, and beautify HTML and CSS online with automatic language detection. Runs entirely in your browser, with no uploads.
Built by Luca Stanek
Convert SVG to PNG: Save vector graphics at any size with sharp detail as PNG, JPG, or WebP, with transparent backgrounds and presets for favicons, Discord emoji, and Minecraft server icons. Runs entirely in your browser.
Built by Luca Stanek
Convert colors between HEX, RGB, HSL, HSV, and CMYK in real time, find the closest CSS named color, and check WCAG contrast against black and white—all in your browser.
Built by Justin Schuessler
Calculate the WCAG contrast ratio between two colors live and check it against AA/AAA standards and UI components—all in your browser.
Built by Justin Schuessler
Generate complementary, analogous, triadic, and other color schemes live from a base color—nothing is stored or transmitted.
Built by Justin Schuessler
Generate a complete favicon set from any image—favicon.ico, Apple Touch icon, Android Chrome icons, site.webmanifest, and a ready-to-copy HTML snippet—all in your browser.
Built by Jakub Martyniak
FAQ
Quick answers about the CSS cursor property and this tool.
36 keywords in six groups: General (auto, default, none), Links & Status (pointer, help, context-menu, progress, wait), Selection (text, vertical-text, cell, crosshair), Drag & Drop (grab, grabbing, move, copy, alias, no-drop, not-allowed), 14 resize cursors, and Scroll & Zoom (all-scroll, zoom-in, zoom-out). You can also use custom images with url().
Use pointer for anything that responds to a click: links, buttons, clickable cards or icons. Links already show the hand by default; buttons don’t in many browsers. Don’t use pointer on text or areas that do nothing. cursor: hand is an old, non-standard value from early versions of Internet Explorer, so it isn’t among the tool’s 36 values. Use cursor: pointer; for the hand.
Set cursor: auto on the element to let the browser decide, or cursor: default for the normal arrow. Because cursor is inherited, you can override a parent element’s pointer directly on the child. You’ll find both values in the tool’s General group.
cursor: not-allowed shows a circle with a slash through it. If you also set pointer-events: none on a disabled button, the cursor no longer appears because the element ignores the mouse. You can see a button with not-allowed in the test area.
grab shows an open hand over a draggable element; grabbing shows a closed hand while dragging. move shows a four-way arrow and suits elements you can move freely, such as windows or widgets.
progress shows an arrow with a loading indicator: something is loading in the background, but the page remains usable. wait shows only the loading indicator and means the interface is blocked. progress is suitable for most loading tasks on the web.
With cursor: url(cursor.svg) 2 30, crosshair;, you specify an image and optional hotspot, followed by a fallback keyword. Browsers support custom cursors up to 128Â Ă—Â 128 pixels. This tool shows the 36 standard values; you cannot upload custom images here.
CSS only specifies which cursor to show. Your operating system and browser draw it, so it looks different on macOS, Windows, and Linux. Touch devices have no mouse pointer: there, the tool shows a list with descriptions and copy buttons. Everything runs in your browser, with no uploads.
Any more questions?
Contact SupportA ZAP-Hosting VPS reliably gets your site online.
No setup. No risk. Online in seconds.
Looking for more tools? View all developer tools
© 2026 ZAP-Hosting GmbH
Preferred source on Google
