Cursor Cove

Custom cursor maker & CSS cursor tools

CSS cursor gallery

Every CSS cursor, live under your pointer

Hover over a tile to see the cursor your own browser and system draw for that keyword. Copy the CSS with one click, and read the notes where support differs.

Show

Showing all 36 cursors.

General 3

  • auto

    Lets the browser decide: an I-beam over text, an arrow elsewhere.

    Also works on iPad with a mouse or trackpad.

  • default

    The platform's normal cursor, usually an arrow.

  • none

    Hides the cursor completely while it is over the element.

    Use with care: people lose track of where they are pointing.

Links & status 5

  • context-menu

    A context menu is available here.

    Chrome and Firefox show it only on macOS and Linux; on Windows you see the normal arrow.

  • help

    Help is available, often an arrow with a question mark.

  • pointer

    A link or something clickable, usually a pointing hand.

  • progress

    Busy in the background, but you can keep working.

  • wait

    Busy: wait before doing anything else here.

Selection 4

  • cell

    A table cell or a range of cells can be selected.

    Also works on iPad with a mouse or trackpad.

  • crosshair

    Precise selection, as in image editors and pickers.

  • text

    Text that can be selected, usually an I-beam.

    Also works on iPad with a mouse or trackpad.

  • vertical-text

    Vertical text that can be selected: a sideways I-beam.

Drag & drop 7

  • alias

    Dropping here creates a shortcut or alias.

  • copy

    Dropping here makes a copy.

  • move

    The thing being dragged will be moved.

  • no-drop

    The dragged item cannot be dropped here.

  • not-allowed

    The action will not be carried out, as on a disabled button.

  • grab

    Something that can be grabbed and dragged, an open hand.

    Unprefixed since Chrome 68, Firefox 27 and Safari 11; older versions needed -webkit- or -moz-.

  • grabbing

    Something is being dragged right now, a closed hand.

    Unprefixed since Chrome 68, Firefox 27 and Safari 11.

Resize & scroll 15

  • all-scroll

    Can be scrolled or panned in any direction.

  • col-resize

    A column can be resized sideways.

  • row-resize

    A row can be resized up and down.

  • n-resize

    The top edge can be moved.

  • e-resize

    The right edge can be moved.

  • s-resize

    The bottom edge can be moved.

  • w-resize

    The left edge can be moved.

  • ne-resize

    The top-right corner can be moved.

  • nw-resize

    The top-left corner can be moved.

  • se-resize

    The bottom-right corner can be moved.

  • sw-resize

    The bottom-left corner can be moved.

  • ew-resize

    Resizes left and right: a two-headed horizontal arrow.

  • ns-resize

    Resizes up and down: a two-headed vertical arrow.

  • nesw-resize

    Resizes diagonally, top-right to bottom-left.

  • nwse-resize

    Resizes diagonally, top-left to bottom-right.

Zoom 2

  • zoom-in

    Something can be enlarged, a magnifier with a plus.

    Unprefixed since Chrome 37, Firefox 24 and Safari 9.

  • zoom-out

    Something can be made smaller, a magnifier with a minus.

    Unprefixed since Chrome 37, Firefox 24 and Safari 9.

Test any cursor value

Hover here to test it

Why the same keyword looks different

CSS only names the cursor; the operating system and browser draw it. The pointing hand, the busy indicator and the resize arrows all look different on Windows, macOS and Linux, and each person's cursor size, colour and accessibility settings change them again, so check your design on the systems your visitors use.

A few values have real gaps. Chrome and Firefox show context-menu only on macOS and Linux. On an iPad with a mouse or trackpad, Safari draws only auto, text, cell and image cursors, and shows the plain pointer for the rest. Old prefixes such as -webkit-grab are no longer needed.

Choosing the right one

Use pointer for things that act when clicked, not-allowed on disabled controls, grab and grabbing for draggable items, and the two-headed -resize values for splitters and handles. Keep none for full-screen games and video, where you draw your own pointer.

Support facts come from MDN's cursor reference and its browser compatibility data.

Questions

Is there a cursor called hand?

Not any more. hand was an old Internet Explorer value; the standard keyword for a pointing hand is pointer.

What is the difference between auto and default?

auto lets the browser choose by context, so text gets an I-beam. default always shows the normal arrow, even over text.

Why do I need a keyword after url()?

The CSS rule is invalid without one, and it is what the browser shows if your image fails to load.