Cursor Playground
Visualize CSS cursors & generate custom ones.
Basic & Status
Selection & Drag
Resize & Zoom
Custom Cursor
Upload PNG/SVGMax 32x32 recommended
Test Area
👇Hover here to testdefault
The Developer's Guide to CSS Cursors
Cursors are one of the most important micro-interactions on the web. They tell the user what they can do with an element before they even click it.
Best Practices
- Pointer vs. Default: Only use
pointer(the hand) for things that perform an action (links, buttons). If it's just text, leave it asdefault. - Not Allowed: Use
not-allowedfor disabled buttons. It prevents user frustration by signaling "stop" immediately. - Grabbing: Use
grabfor draggable items and switch tograbbingvia JavaScript while the user is holding the mouse down.
Custom Cursors
You can use images as cursors! However, browsers have strict limits:
- Max size is usually 32x32 or 128x128 pixels depending on the OS.
- Always define a fallback:
cursor: url(icon.png), auto; - Don't use animated GIFs (most browsers ignore them).
Advertisement