Why does grabbing flick back to grab when I drag fast?

The pointer left the element, so the browser shows the cursor of whatever is under it now. Put the rule on html while dragging: html.is-dragging, html.is-dragging * { cursor: grabbing; }.

Can I use :active for grabbing?

Yes for simple drags, as long as the pointer stays over the element while the button is down.

Do I need -webkit-grabbing?

Not for current browsers. Chrome 68+, Firefox 27+ and Safari 11+ accept grabbing without a prefix.

cursor: grabbing in CSS: the closed hand mid-drag

cursor: grabbing; Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one.

This is the cursor your browser and system draw for grabbing.

What it shows

A closed hand. macOS has a native Closed hand cursor. Windows has no role for it, so Chrome, Edge and Firefox draw their own.

Usage

When to use it

Use it for

While a card, slider or canvas is being dragged with the button held down.
On html during a drag, so the hand stays closed even when the pointer slips off the element.
While panning a map or canvas with the button down.

Avoid it for

Before the drag starts. That is grab.
During native HTML drag and drop, where the system draws the cursor.

Code

Copy the snippet

CSS

.map { cursor: grab; }
.map:active,
html.is-dragging,
html.is-dragging * { cursor: grabbing; }

HTML

<div class="map">Press and drag to pan</div>

Support

Browsers and systems

Browser support for grabbing
Browser	Support
Chrome	68
Edge	79
Firefox	27
Safari	11
Safari on iOS	no
Chrome on Android	68

The matching operating system cursor
System	Matching cursor
Windows role	none (browser-supplied)
Windows file	`none`
macOS	Closed hand

Watch out

Gotchas

:active works for simple cases, but the cursor changes back as soon as the pointer leaves the element. A class on html during the drag is sturdier.
Remove the drag class on pointerup and on pointercancel, or the closed hand gets stuck.

FAQ

Questions

Why does grabbing flick back to grab when I drag fast?: The pointer left the element, so the browser shows the cursor of whatever is under it now. Put the rule on html while dragging: html.is-dragging, html.is-dragging * { cursor: grabbing; }.
Can I use :active for grabbing?: Yes for simple drags, as long as the pointer stays over the element while the button is down.
Do I need -webkit-grabbing?: Not for current browsers. Chrome 68+, Firefox 27+ and Safari 11+ accept grabbing without a prefix.

More