Custom Cursor Maker: Design, Test and Download Your Own Cursor

What is a custom cursor and what does this maker do?

A custom cursor replaces the standard arrow, hand or text pointer with an image of your choice while the mouse is over part of a page. Browsers read it from the CSS cursor property, so it is plain styling: no plugin, no script.

This custom cursor maker covers the whole job in one page. You build the image, mark the click point, test it under a real pointer, and leave with files and a CSS rule.

• Build: six preset shapes with your colours, outline and shadow, or your own image scaled to fit.
• Aim: a zoomed preview with a click-to-set hotspot and numeric fields for exact placement.
• Test: a live pad that applies the cursor with CSS, using the same rule you will export.
• Export: PNG, a real .CUR file, and copy-paste CSS.

How do you make a custom cursor for your own website?

Make the image, choose its hotspot, then point the cursor property at it. The rule has three parts: the image URL, two optional hotspot numbers, and a required fallback keyword such as auto that the browser uses if the image fails to load.

.custom-cursor {
  cursor: url("custom-cursor.png") 4 2, auto;
}

/* on links only */
a { cursor: url("custom-cursor.png") 4 2, pointer; }

To make a CSS custom cursor apply everywhere, put the rule on body. Links, buttons and text fields set their own cursor, so add rules for them too, with a pointer or text fallback.

Data URL or file?

A data URL puts the image inside the CSS, so there is nothing extra to host. A file path keeps the stylesheet short and lets the browser cache the image. The snippet box switches between both, plus a .CUR variant.

What is the cursor hotspot and where should it go?

The hotspot is the single pixel inside the image that counts as the pointer position. It is measured in image pixels from the top-left corner, which is 0 0, and browsers clamp it to the image. If you leave it out, the browser reads one from the file if it has one, and otherwise uses the top-left corner.

• Arrows and pointing hands: put it on the tip, so the click lands where the user sees the point.
• Dots, rings and crosshairs: put it in the centre.
• I-beams: put it in the middle of the vertical line.
• Your own image: start at the visible point you want to click with, not at the image edge.

This tool sets each preset's hotspot for you. Use Preset default to return to it after experimenting. A wrong hotspot is the most common reason a home-made cursor feels off, because clicks land a few pixels away from where you aimed.

What custom cursor size should you use?

Use 32 by 32 pixels or smaller. MDN says Firefox and Chromium restrict cursor images to 128 by 128 pixels by default, that images over the limit are generally ignored, and that it recommends limiting cursor images to 32 by 32.

The This size on your screen panel shows your cursor at real size in CSS pixels beside a 32 px dashed square. Need brand colours first? Sample them with the color picker from an image.

PNG, SVG or a .CUR file: what should you download?

For the web, use PNG. The CSS specification requires browsers to support PNG cursors, and SVG with a natural size, while MDN notes desktop browsers also broadly support the .cur format. This tool exports a custom cursor PNG and a .CUR file from the same canvas.

A .CUR is the Windows cursor file. It uses the same layout as an .ICO file, with the type field set to 2 and the hotspot stored in the two fields icons use for planes and bit count. The maker builds that file in your browser and embeds the PNG unchanged, which Windows has supported in icon files since Vista.

If a program rejects the .CUR, use the PNG: support for PNG data inside cursor files varies, and this tool does not check every program. Starting from a logo? Turn it into a PNG with the SVG to PNG converter.

How do you get a custom cursor for Chrome on every site?

Use a browser extension. A page's CSS only reaches that page, so a cursor that follows you across the web has to be injected into each site by an extension. That is why searches for a custom cursor for Chrome and a custom cursor for Chrome extension end at the Chrome Web Store, not at a website.

Check an extension's permissions before you install it. Changing a cursor on every page usually needs access to all sites, which is worth weighing for a cosmetic feature. The custom cursor extension guide explains what to look for.

You can also build your own: an extension can inject the CSS this tool gives you into pages. That is a development task and outside what this page does.

Can you set a custom cursor for a Chromebook?

Only its size and colour. Google's Chromebook help lists cursor options in the accessibility features: you can change the cursor's size or colour, and turn on cursor highlighting. There is no setting for a custom cursor image at the system level.

1. Open Settings and choose Accessibility.
2. Open Cursor and touchpad.
3. Turn on the large cursor or change its size and colour.
4. Use an extension if you want a custom image on web pages.

Extensions can change the cursor on web pages in Chrome on a Chromebook, but not the pointer on the shelf, launcher or other apps. If you build a site for Chromebook classrooms, the CSS from this custom cursor maker works in the browser like anywhere else, with the same size rules.

What about custom cursor trails and animated cursors?

The CSS cursor property shows one image. It does not draw a trail. Custom cursor trails on a web page are built with script that places elements behind the pointer, and extensions can add them to sites you visit.

Animation is also limited. MDN says browsers must support static formats such as PNG and secure static SVG, while animated formats are something they should support. That is why this maker uses the first frame of a GIF and does not create animated cursors.

• On your site: a trail is a design and performance choice; test it on slow devices and respect reduced-motion settings.
• In Chrome: trail extensions handle pages you visit.
• On Windows: the operating system has its own pointer trails option in its mouse settings, separate from any web page.

Why is my custom cursor not showing?

Usually the image is too big, the URL is wrong, the fallback keyword is missing, or another CSS rule overrides yours. Work through this list.

• Over 128 px: browsers generally ignore it. Stay at 32 px or less.
• No fallback: cursor: url(a.png) 0 0 is invalid; add , auto.
• Wrong path: the URL is relative to the stylesheet, not the page.
• Over 32 px near the edge: Chrome can swap it for the default pointer.
• A specific element rule: links and inputs set their own cursor; target them.
• Touch screens: a phone or tablet has no mouse pointer to restyle.