CSS Cursor Generator

Operating systems only switch to the hand cursor for links, so native desktop buttons keep the arrow. On the web, however, users learned to expect pointer on anything clickable, and most design systems (including Bootstrap and Material) apply it to buttons. The practical rule: use pointer for any element that triggers an action on click, and keep default for static text, so the cursor change becomes a reliable signal of interactivity.

The X/Y pixel inside the cursor image that represents the actual click point. For a default arrow, the hotspot is usually the tip (0, 0 – top-left). For a crosshair, the center (e.g., 16, 16 for a 32×32 image). For a hand pointing finger, the fingertip. Setting hotspot incorrectly makes clicks land where the cursor’s not actually pointing.

If the image fails to load (network error, blocked, file moved), the browser uses the fallback keyword instead of breaking. Without a fallback, your cursor disappears entirely. Always pick a fallback that semantically matches your custom cursor (e.g., pointer for a clickable custom hand, crosshair for an aimer).

Chrome / Firefox / Edge: 128×128 px. Safari: 32×32 px (smaller maximum). Larger images may be ignored entirely or downscaled – test in your target browsers. Use a 32×32 transparent PNG for maximum compatibility.

System keywords (pointer, text, etc.) map to whatever the OS draws for that cursor. macOS has a distinctive arrow shape; Windows uses thinner cursors; Linux varies by theme. Same CSS, different visuals. Custom URL cursors look identical everywhere because the image is bundled.

Touch devices (phones, tablets) have no visible cursor – your cursor CSS does nothing on mobile. Desktop browsers with pointing devices (mouse, trackpad, stylus) honor cursor CSS. For accessibility, also handle keyboard focus styling – not all users see cursors.

auto: browser picks based on element (text cursor on text, arrow elsewhere). default: forces the system default arrow regardless of element type. none: hides the cursor entirely – useful for video players and fullscreen experiences. The original FAQ glossed over these distinctions.

grab: open-hand cursor signaling “you can grab this.” grabbing: closed-fist cursor for “you’re currently dragging.” Switch between them in JS based on mousedown/mouseup events for proper drag feedback.

No – CSS transitions don’t apply to the cursor property. It snaps instantly. For animated cursors, use an animated .gif or .png APNG file in the URL – but support is patchy (some browsers freeze the animation on the first frame).

No. The image URL you enter for custom cursors is fetched by your browser when applied to a page – never by this tool. Pure browser-side CSS generation.