CSS Cursors Reference
Hover over each box to see the cursor in action. Click to copy the CSS.
Try it with this example
Hover over each cursor to see the live preview. Click to copy the CSS value (e.g. cursor: grab).
What is this tool?
CSS defines many cursor values: pointer, grab, not-allowed, crosshair, and more. The CSS Cursors reference shows every cursor with a live preview. Hover over each to see how it renders. Click to copy the CSS value (e.g. cursor: grab). Like Chris Coyier's "The Cursors" reference—a visual catalog of cursor options. Use it when choosing the right cursor for buttons, links, draggable elements, or disabled states. All display runs in your browser.
Cursors communicate interaction: pointer for clickable, grab for draggable, not-allowed for disabled. Text cursor for editable text, crosshair for selection tools. The reference lists the standard keywords and shows how they look in your browser. Rendering can vary by OS and browser—what "grab" looks like on Windows may differ from Mac. The tool lets you see the actual appearance. Copy the value and paste into your CSS.
Use it when building custom UI components. When you want to match native behavior (e.g. resize cursors for a splitter). When debugging "why doesn't my cursor change?"—sometimes the value is wrong or overridden. The reference is a quick lookup. For custom cursor images (url(...)), you'd need additional tools; this one focuses on the built-in keywords.
All display is client-side. No server, no tracking. Hover, preview, copy. Bookmark it for cursor reference. Pairs with the Font Awesome Guide and Font Library for frontend styling resources.
Essential for UX and interactive design.