Custom Cursor CSS Generator

A custom cursor replaces the default mouse pointer with an image of your choice using the CSS cursor: url() property. You can specify any PNG, GIF, or SVG image, along with an optional hotspot (the exact click point). This is widely used for branded websites, games, and interactive experiences.

The hotspot is the pixel coordinate within the cursor image that corresponds to the actual mouse click position. For example, a typical arrow cursor has its hotspot at the tip (top-left corner). For a crosshair, it's at the center. Setting the correct hotspot ensures clicks land exactly where users expect.

Most modern browsers (Chrome, Firefox, Edge) support cursor images up to 128×128 pixels. Safari may have lower limits (around 32×32 to 64×64). If your image exceeds these limits, the custom cursor may be ignored and the fallback cursor will be used instead. We recommend keeping cursors at 32×32 or 48×48 for best compatibility.

PNG is the most recommended format — it supports transparency and works across all modern browsers. SVG is supported in Chrome and Edge but has limited support in Firefox and Safari. GIF works but animated GIFs won't animate as cursors. JPG/WebP also work but lack transparency. For Windows .cur and .ani files, browser support is more limited.

Yes! This tool lets you pick from popular emojis and automatically converts them into cursor-ready PNG images. The emoji is rendered on a canvas at your chosen size and exported as a data URI. Simply click any emoji preset above, adjust the size and hotspot, and you'll have a fun emoji cursor ready to use.

Common reasons include: (1) the image size exceeds browser limits (keep it ≤128×128), (2) the image URL is broken or inaccessible, (3) you forgot to include a fallback cursor after the URL (e.g., , pointer), (4) the hotspot coordinates are outside the image bounds, or (5) the image format isn't supported by your browser. Always test across different browsers.

Copy the generated CSS code and add it to your stylesheet or a <style> tag. You can apply it globally using * { cursor: url(...), fallback; }, or target specific elements like a:hover { cursor: url(...), pointer; }. The data URI format is self-contained, meaning you don't need to host the image separately.

This tool generates PNG images and CSS code. For .cur files (Windows cursor format), you would need a dedicated converter tool or software like RealWorld Cursor Editor. However, modern websites can use PNG cursors directly via CSS, which is simpler and more cross-platform. The downloadable PNG from this tool works perfectly with the cursor: url() CSS property.