CSS Cursor Generator
About this generator
Two modes in one tool. Standard cursors gallery shows all 36 system keywords grouped by purpose (General / Links / Selection / Drag-and-Drop / Resize / Zoom) — hover any tile to preview that cursor live on the tile itself. Custom cursor builder turns emoji, 2-char text badges, or raw SVG into data-URL cursors with a visual hotspot picker (click the preview to set the exact click point).
4 export formats — CSS, SCSS @mixin, Tailwind (named utilities for standard cursors, arbitrary-value syntax for custom URLs), styled-components.
Permalink — URL encodes the entire cursor recipe. No login, no watermark, no paywall. Free and MIT-licensed.
Why use this Cursor Generator?
How to use this generator
Cursor reference
| Cursor | Visual | Use it for |
|---|---|---|
| cursor: pointer | system pointer hand | Clickable interactive element. The default for buttons and links. |
| cursor: text | I-beam | Indicates selectable text. Auto-applied to text elements; rarely needed manually. |
| cursor: not-allowed | circle with slash | Disabled interactive element. Apply to disabled buttons, locked rows, blocked actions. |
| cursor: grab / grabbing | open / closed hand | Draggable element. Use grab for hover, grabbing for active drag (toggle via JS). |
| cursor: zoom-in / out | magnifier with +/− | Image lightbox triggers, map zoom controls. |
| cursor: col-resize / row-resize | double arrow | Resize handles between columns or rows in spreadsheets/tables. |
| cursor: url('...') X Y | custom image + hotspot | Custom cursor. X and Y are the hotspot offset from the top-left of the image (in pixels). |
| cursor: none | no cursor | Hide the cursor entirely. Use for video players, kiosk modes, immersive canvas apps. |
Common cursor patterns
button:disabled,
button[aria-disabled='true'] {
cursor: not-allowed;
opacity: 0.5;
}.draggable {
cursor: grab;
}
.draggable:active,
.draggable.is-dragging {
cursor: grabbing;
}.canvas-area {
cursor: url('/cursors/brush.svg') 4 28, crosshair;
}.resize-handle {
cursor: col-resize;
width: 4px;
background: transparent;
}
.resize-handle:hover {
background: rgba(124, 108, 255, 0.4);
}Pro tips
Frequently asked questions
How many CSS cursor keywords are there?
36 standard keywords in modern CSS, grouped into 6 categories: General (auto, default, none), Links & Status (pointer, wait, progress, help, context-menu), Selection (cell, crosshair, text, vertical-text), Drag & Drop (alias, copy, move, no-drop, not-allowed, grab, grabbing), Resize (12 directional variants including ew-resize, ns-resize, nesw-resize, nwse-resize), and Zoom (zoom-in, zoom-out). The browser maps each keyword to a system-provided image — designers don't get to choose what the pointer LOOKS like, only which semantic meaning to apply.
What's a cursor hotspot and why does it matter?
The hotspot is the EXACT pixel within the cursor image that registers as the click point. For a standard arrow pointer, the hotspot is the tip — clicking lands on the pixel under the arrow's tip, not the center of the image. If you make a custom 32×32 cursor that LOOKS like an arrow pointing top-left but set hotspot to (16, 16), clicks register from the middle of the image, not the tip — confusing the user. The generator's hotspot picker shows you the click point visually so you can place it precisely on the tip / center / wherever the semantic 'click here' point is.
Why doesn't my custom SVG cursor work in Safari?
Safari is stricter about cursor data URLs than Chrome / Firefox. Common causes: (1) SVG width/height must be set as attributes (not just viewBox); (2) SVG must declare xmlns='http://www.w3.org/2000/svg'; (3) max cursor size is 32×32 (some Safari versions reject larger); (4) the SVG must not reference external resources (fonts, images). The generator's SVG mode produces conformant data URLs. If you're hand-rolling SVG and Safari fails silently, check the data URL with a base64 decoder + re-validate the SVG with W3C validator.
Does cursor: none work for hiding the cursor?
Yes, on all evergreen browsers since 2014. cursor: none completely hides the system cursor over the element. Use cases: full-screen image viewers, video players, fullscreen game UIs, custom-built cursors implemented in JS (where you draw a div following mousemove). The element still receives clicks — only the visual cursor disappears. WCAG note: hiding the cursor entirely violates 2.4.7 (Focus Visible) if the cursor is the only focus indicator; pair with an obvious hover/focus state to stay accessible.
How big can a custom cursor be?
32×32 is the safe size — every browser renders it identically. 64×64 works in Chrome / Firefox but Safari sometimes downscales. Beyond 128×128 most browsers reject the cursor and fall back to your specified fallback keyword. The generator emits 32×32 (the safe convergent size); if you need larger for accessibility (low-vision users may benefit from 48-64px cursors), test in target browsers before shipping.
Should I be using custom cursors at all?
Sparingly. Custom cursors disrupt accessibility — users with cursor-tracking disabilities (motor impairments, low vision) rely on system cursor consistency. Game UIs and creative tools (Figma, Procreate) genuinely benefit; product pages and dashboards usually don't. If you do ship a custom cursor: (1) set a sensible fallback keyword so broken data URLs degrade gracefully, (2) consider prefers-reduced-motion + opt-out toggle, (3) keep the hotspot at the natural click point so users don't mis-click.
Is this free for commercial use?
Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.
See it used in real designs
Browse hand-coded collections that put this tool to work.
