No Login Data Private Local Save

CSS Cursor Demo - Online Preview All Pointer Styles

16
0
0
0

CSS Cursor Demo

Hover over each box to preview — click to copy the CSS code

Showing 36 of 36 cursors No cursors matched — try a different search
Hover me
auto
cursor: auto;
Hover me
default
cursor: default;
Hover me (cursor hidden)
none
cursor: none;
Hover me
pointer
cursor: pointer;
Hover me
help
cursor: help;
Hover me
context-menu
cursor: context-menu;
Hover me
progress
cursor: progress;
Hover me
wait
cursor: wait;
Hover me
text
cursor: text;
Hover me
vertical-text
cursor: vertical-text;
Hover me
crosshair
cursor: crosshair;
Hover me
cell
cursor: cell;
Hover me
grab
cursor: grab;
Hover me
grabbing
cursor: grabbing;
Hover me
move
cursor: move;
Hover me
copy
cursor: copy;
Hover me
alias
cursor: alias;
Hover me
no-drop
cursor: no-drop;
Hover me
not-allowed
cursor: not-allowed;
Hover me
all-scroll
cursor: all-scroll;
Hover me
col-resize
cursor: col-resize;
Hover me
row-resize
cursor: row-resize;
Hover me
n-resize
cursor: n-resize;
Hover me
s-resize
cursor: s-resize;
Hover me
e-resize
cursor: e-resize;
Hover me
w-resize
cursor: w-resize;
Hover me
ne-resize
cursor: ne-resize;
Hover me
nw-resize
cursor: nw-resize;
Hover me
se-resize
cursor: se-resize;
Hover me
sw-resize
cursor: sw-resize;
Hover me
ew-resize
cursor: ew-resize;
Hover me
ns-resize
cursor: ns-resize;
Hover me
nesw-resize
cursor: nesw-resize;
Hover me
nwse-resize
cursor: nwse-resize;
Hover me
zoom-in
cursor: zoom-in;
Hover me
zoom-out
cursor: zoom-out;

Frequently Asked Questions

Everything you need to know about CSS cursor styles

The cursor property in CSS specifies the type of mouse cursor to display when pointing over an element. It allows developers to enhance user experience by providing visual cues — for example, using pointer for clickable elements, text for selectable text, or not-allowed for disabled actions. There are over 30 standard cursor values available across modern browsers.

There are 36 standard cursor values defined in the CSS specification, including auto, default, none, pointer, grab, grabbing, various directional resize cursors (n-resize, se-resize, etc.), zoom-in, zoom-out, and more. Additionally, you can use custom images via the url() function.

Use the :hover pseudo-class combined with the cursor property. For example:
.my-button:hover { cursor: pointer; }
This changes the cursor to a hand pointer whenever the user hovers over the element. You can apply any valid cursor value.

Yes! CSS allows custom cursor images using the url() function:
cursor: url('custom-cursor.png'), auto;
You can specify multiple fallback images, and always include a standard keyword (like auto or pointer) as the final fallback. Supported formats include .png, .cur, and .svg. Keep images small (ideally 32Ă—32px or less) for best performance.

grab displays an open hand cursor ✋, indicating that an element can be grabbed (draggable but not currently being dragged). grabbing displays a closed fist cursor ✊, indicating that an element is actively being dragged. A common UX pattern is to use grab as the default state and switch to grabbing during the drag operation (via JavaScript events like mousedown / touchstart).

For buttons, links, and any interactive elements, cursor: pointer is the standard choice — it displays the familiar hand pointer 👆. For elements that trigger help tooltips, use cursor: help (arrow with question mark). For context menus, use cursor: context-menu. Always ensure the cursor matches user expectations to provide intuitive navigation.

Yes — cursor: none makes the mouse cursor invisible when hovering over the element. This is commonly used in immersive experiences like full-screen videos, games, or custom cursor implementations where the default cursor would be distracting. Use with caution: hiding the cursor can confuse users. Always provide a clear way to restore visibility (e.g., pressing Escape or moving to a different area).

Most standard cursor values enjoy excellent cross-browser support (Chrome, Firefox, Safari, Edge — all modern versions). Some newer values like grab and grabbing were added later and may not work in very old browsers (e.g., IE11 and below). The zoom-in and zoom-out cursors are also well-supported in modern browsers. Always test your target browsers, and provide sensible fallbacks using the cascade (e.g., cursor: grab, -webkit-grab, default;).

For disabled buttons or inputs, use cursor: not-allowed đźš« to visually indicate the element cannot be interacted with. For draggable items that cannot be dropped in a certain zone, use cursor: no-drop. Both provide clear visual feedback that the action is unavailable.

The default value is auto, which lets the browser determine the appropriate cursor based on the context. For example, auto displays a text cursor over text, a pointer over links, and the default arrow over plain elements. If you want to explicitly reset to the standard arrow cursor regardless of context, use cursor: default.
🔧 Related Tools