Cursor Playground
Client-Side SecureFree online CSS Cursor Playground. Visualize all available CSS cursor properties and generate custom cursor code. Simple, fast, and interactive.
Basic & Status
Selection & Drag
Resize & Zoom
Custom Cursor
Test Area
Is this tool broken?
Let us know if you found a bug or have a feature request.
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).
You might also like
Free online Fancy Border Radius. Generate organic, blob-like shapes for your CSS designs. Customizable and ready to copy-paste.
Free CSS Glassmorphism Generator. Create beautiful frosted glass effects for your UI. Customize blur, transparency, and color. Copy CSS instantly.
Free online CSS Gradient Generator. Create stunning linear and radial gradients. Customize colors and directions. Copy CSS code instantly.