CSS Cursor Playground

The CSS cursor Property

The cursor CSS property controls what the mouse pointer looks like when a user hovers over an element. It's one of those tiny yet impactful details that communicates affordance — it signals to the user what's interactive, what's draggable, what's resizable, and what's not.

Get it right and the interface feels intuitive. Get it wrong (using pointer everywhere, or forgetting to change the cursor on draggable elements) and users feel confused without being able to articulate why.

All Standard Cursor Values

The CSS spec defines over 30 cursor keyword values. Most developers know default, pointer, and not-allowed — but the full set is much richer:

General Interaction Cursors

Text and Selection Cursors

Resize and Drag Cursors

Drag and Drop Cursors

Zoom Cursors

Custom Cursor Images

You can assign any image as a cursor using the url() syntax:

.custom-cursor {
  cursor: url('/images/pencil-cursor.png') 0 16px, auto;
}

The two numbers after the URL are the hotspot coordinates — the exact pixel within the image that represents the cursor's active point. For a crosshair cursor, that's usually the center. For a pencil, it's typically the tip.

Best practices for custom cursors:

• Keep the image small — 32×32 pixels is the standard, 64×64 is the maximum many browsers support.
• Always provide a fallback cursor after the url() (the auto at the end). If your image fails to load, the browser falls back to the standard cursor.
• PNG format with transparency works best.
• Avoid making the hotspot confusing — it should correspond to the "action point" of whatever the cursor represents.

Common Mistakes to Avoid

Using pointer on non-clickable elements. Only use pointer on elements that trigger an action on click. Using it too liberally confuses users about what's interactive.

Forgetting grabbing on drag start. If you apply grab on a draggable element, switch to grabbing when the drag begins. Without this, the cursor snaps back to grab mid-drag, looking jittery.

Not handling not-allowed on disabled buttons. A <button disabled> in HTML shows not-allowed by default — but custom buttons built with <div> elements don't. Always add cursor: not-allowed to visually disabled interactive elements.

Missing cursor on text over images. If you have text overlaid on a background image, browsers sometimes show the text cursor over the text and the pointer cursor when hovering the image behind it. Set cursor: default explicitly if needed.

Related Search Queries

To help users find exactly what they are looking for, this tool is also optimized for searches like: css mouse pointer, custom cursor test, css cursor hand.