CSS Cursor Generator
Browse 34 CSS cursors organized by category, with custom URL cursor builder. Live hover preview. Free, client-side.
Browse 34 CSS cursors organized by category (General / Text / Interactive / Drag / Resize / Specialty). Hover each card to preview. Custom URL cursor builder for image-based cursors with hotspot offset.
CSS
HTML
How to Use CSS Cursor Generator
- Set a CSS selector (default
.element) - your CSS rule targets this. - Pick mode. Keyword: click a card from the 34 system cursors organized by category. Custom URL: paste an image URL + hotspot offset + fallback keyword.
- Hover each cursor card to preview how the cursor looks. Click to select.
- For custom URL cursors: set hotspot X/Y (the pixel inside the image that points "where you're actually clicking" - for a crosshair, this is the center). Always specify a fallback keyword in case the image fails to load.
- Copy CSS, copy HTML, or download as
cursor.css.
Frequently Asked Questions
Should buttons use cursor: pointer or cursor: default?
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.
What’s a hotspot?
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.
Why specify a fallback keyword for URL cursors?
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).
What’s the max custom cursor size?
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.
Why do cursors look different on macOS vs Windows?
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.
Do all cursors work on every device?
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.
What’s the difference between auto, default, and none?
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.
What’s grab vs grabbing?
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.
Can I animate cursor changes?
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).
Is anything uploaded?
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.