Syntax
.draggable { cursor: grab; } .draggable:active { cursor: grabbing; }When to use
Use on any element that can be dragged (kanban cards, sliders, panning maps).
Keyword reference
The CSS property is cursor. The value form covered on this page is cursor: grab / grabbing. The full grammar accepts a comma-separated list of url() sources followed by a single required keyword fallback. Browsers walk the list left-to-right, use the first source they can render, and fall back to the keyword if all url() sources fail.
Browser support notes
- Chrome / Edge (Chromium): accepts cursor images up to 128×128. Falls back gracefully on broken URLs.
- Firefox: caps cursor images at 32×32 unless DPI scaling is in play. Always ship a 32×32 variant for Firefox compatibility.
- Safari: historically picky about URL-only fallback chains; always include a CSS keyword fallback at the end.
- Mobile Safari / Chrome on Android: no cursor at all. Wrap custom cursor rules in
@media (pointer: fine)to avoid wasted bytes.
Related cursor properties
- Building a fallback chain
- Hotspot tuning
- All standard cursor keywords
- Custom cursors on touch devices
From keyword to a real cursor pack
If you have decided which CSS cursor value you want and now need a cursor pack to ship behind it, browse the collections page or pick a free CC0 set from the community assets page. The website-cursor tutorial walks through the full deploy.