Cursor Generator — Free Custom CSS Cursor Tool

Use the Cursor Generator to turn any image into working CSS cursor code — upload an image, set the click point, and copy the finished code straight into your site.

/* Upload an image to generate your CSS */

How It Works

The tool builds a standard CSS cursor declaration: cursor: url("image"), fallback;. The browser swaps in your image whenever the mouse moves over the selector you target, and falls back to the keyword (like pointer or auto) if the image fails to load.

Two details decide whether a custom cursor actually works:

• The hotspot. This is the exact pixel in your image that acts as the “tip” of the cursor — where a click actually registers. Click anywhere on the image thumbnail in the tool to set it; most browsers default to the top-left corner if no hotspot is defined, which feels off for anything but a simple arrow shape.
• The size. Browsers cap how large a cursor image can render. Chrome and Edge generally support up to 128×128px, but Firefox and Safari are stricter, and anything larger tends to fall back to the default arrow with no warning. Keeping images at 32×32px or 64×64px is the safest range across browsers.

For portability, the tool can embed the image directly into the CSS as Base64 — no image hosting, no separate file upload to your server, just one CSS block that works anywhere.

When to Use a Custom Cursor

• Creative and portfolio sites — a custom cursor reinforces a brand or visual style on hero sections, project galleries, or interactive landing pages.
• Game or interactive experiences — crosshairs, hand icons, or themed pointers for canvas-based or game-like web builds.
• Branded hover states on buttons and links — swapping the cursor on a specific :hover target (rather than the whole page) draws attention to a single call-to-action without overriding the site’s default cursor everywhere else.

On a WordPress site, this CSS drops into the Additional CSS panel (Appearance → Customize → Additional CSS) or a theme’s custom CSS field — no plugin needed for a simple implementation like this.

FAQ

Why isn’t my custom cursor showing up?
The most common cause is image size — browsers silently ignore oversized cursor images and fall back to the default arrow instead of showing an error. Resize the image to 32×32px or 64×64px and confirm the CSS selector actually matches an element on the page.

What image format and size should I use for a CSS cursor?
PNG and GIF are the most reliable formats because they support transparency; SVG works in most modern browsers but has less consistent support for the hotspot offset. Keep the image at 32×32px or 64×64px for the most consistent rendering across Chrome, Firefox, Safari, and Edge.

Can I use a custom cursor on just one element instead of the whole page?
Yes. Set the “Apply to” selector to a specific class or element, such as .my-button or a.custom-link, instead of body, and the cursor will only change when the mouse is over that element.

Does custom cursor CSS work on mobile?
No. Touch devices don’t have a mouse pointer, so the cursor property has no visible effect on phones or tablets — it only applies to devices with a mouse or trackpad.

How do I set the click point (hotspot) of a custom cursor?
Click directly on the image thumbnail in the tool at the spot that should register as the cursor’s tip. The tool converts that click into the X/Y pixel coordinates the browser uses, and you can fine-tune them with the numeric fields if needed.

Can I use a different cursor for hover and click states?
Yes. Enable the Hover and Active tabs to upload separate images for :hover and :active, each with its own hotspot and fallback keyword — useful for buttons that need a distinct “pressed” look.