CSS Cursor Playground

The CSS cursor property defines the mouse cursor appearance when hovering over an HTML element. It accepts predefined keyword values like pointer, grab, text, or custom image URLs. It's an essential tool for improving UX by providing visual feedback about interactive elements.

There are 34 standard keyword values defined in the CSS specification, covering general purpose (auto, default, none), links & status (pointer, help, progress), text selection, drag & drop (grab, grabbing, move), directional resizing (n-resize, ew-resize, etc.), and zoom operations (zoom-in, zoom-out). All 34 are showcased in this playground.

grab displays an open hand, indicating an item is available to be grabbed. grabbing shows a closed fist, signaling the item is currently being dragged. Best practice: use grab on the draggable element and switch to grabbing during the active drag state via JavaScript (e.g., on mousedown / touchstart).

Most standard cursor values enjoy near-universal browser support across Chrome, Firefox, Safari, Edge, and Opera. However, some OS-specific cursors like context-menu may render differently on Windows vs. macOS. The zoom-in and zoom-out values are supported in all modern browsers. Always test across platforms for consistent UX.

Use the url() function: cursor: url('path/to/image.png'), auto;. Supported formats include PNG, SVG, and CUR. Always provide a fallback keyword (like auto or pointer) in case the image fails to load. You can optionally specify hotspot coordinates: cursor: url('icon.png') 10 20, pointer; where 10 and 20 are x/y offsets from the top-left corner. Maximum recommended cursor size is 128×128 pixels for cross-browser compatibility.

cursor: none completely hides the mouse cursor when hovering over the element. This is commonly used in full-screen video players, kiosk applications, immersive games, or custom cursor implementations where you want to replace the native cursor with a custom-rendered one via JavaScript/Canvas. Use with caution — hiding the cursor can disorient users if there's no clear visual alternative.

Simply use the :hover pseudo-class: .my-button:hover { cursor: pointer; }. You can apply cursor styles to any HTML element. For more complex scenarios, use JavaScript to dynamically change element.style.cursor based on application state — for example, switching between grab and grabbing during drag operations.

No — on touch-based mobile devices (iOS, Android), there is no persistent cursor, so CSS cursor styles are not visually rendered during normal touch interaction. They remain important for responsive design, however, because the same page may be viewed on desktop or used with a Bluetooth mouse/pointer on tablets. The cursor property is still parsed and applied; it just has no visible effect on pure touch screens.

auto lets the browser determine the appropriate cursor based on the element and context — for example, it shows the text cursor over selectable text and the default arrow over non-interactive elements. default forces the standard arrow cursor regardless of context. Use auto when you want the browser's smart behavior; use default to explicitly override it.

The cursor property is not animatable via CSS transitions or keyframes — it changes instantly. However, you can simulate animated cursors by using an animated GIF or APNG file as a custom cursor via cursor: url('animated.gif'), auto;, or by using JavaScript to rapidly swap between different cursor values for a frame-by-frame effect.