Skip to content

CSS Cursor Generator

Preview and generate custom CSS cursor styles with standard keywords or custom image URLs and hotspots.

Updated

What is the CSS Cursor Generator?

The CSS Cursor Generator is a specialized developer tool designed to help you preview, test, and generate accurate CSS cursor styles without the trial and error of manual coding. Whether you need a standard UI pointer like grab, crosshair, or zoom-in, or you want to implement a fully custom branded cursor using an image file, this tool handles the syntax and edge cases for you.

Custom image cursors require precise hotspot coordinates (the exact pixel that registers as the "click" point) and a mandatory fallback cursor in case the image fails to load. Our generator validates your inputs, ensures correct URL formatting, and instantly renders a live preview so you can see exactly how the cursor will behave in a real browser environment.

Stop guessing CSS syntax. Generate clean, production-ready cursor declarations in seconds and improve your application's micro-interactions and accessibility.

How it works

1. Choose Your Cursor Type

Select between Standard and Custom Image modes using the segmented control. Standard mode is ideal for built-in browser cursors, while Custom Image mode allows you to upload or link to your own cursor graphics.

2. Configure the Cursor

  • For Standard: Select your desired cursor behavior from the comprehensive dropdown list (e.g., pointer, grabbing, not-allowed).
  • For Custom Image: Paste the absolute or relative URL of your cursor image (.png, .svg, or .cur).

3. Set Hotspot Coordinates (Custom Only)

Define the X and Y hotspot values (0–128px). The hotspot is the specific pixel within your image that the browser treats as the actual clicking point. For example, the tip of an arrow should be 0, 0, while the center of a circular target might be 16, 16.

4. Select a Fallback Cursor

When using a custom image, the CSS specification requires a fallback. Choose a standard cursor (like auto or default) that the browser will use if the custom image fails to load or is unsupported.

5. Preview and Copy

Observe the live preview box to verify the cursor's appearance and hotspot alignment. Once satisfied, click the copy button to grab the production-ready CSS snippet and paste it directly into your stylesheet.

Examples

Standard Pointer Cursor

Generate a standard pointer cursor for clickable elements

Standard: Pointer
 
cursor: pointer;

Custom Image Cursor with Hotspot

Generate a custom cursor using an image URL with specific X and Y hotspot coordinates

Custom Image: https://example.com/cursor.png, X: 16, Y: 16, Fallback: auto
 
cursor: url('https://example.com/cursor.png') 16 16, auto;

Frequently asked questions

What is a CSS cursor hotspot?

A hotspot is the specific pixel coordinate within a custom cursor image that the browser registers as the actual clicking or pointing location. For example, the tip of an arrow cursor is typically the hotspot, whereas for a crosshair, it is the exact center.

What image formats are supported for custom CSS cursors?

Most modern browsers support .png, .svg, and .gif formats for custom cursors. For the best compatibility, performance, and crisp rendering, .png or .svg files sized under 128x128 pixels are highly recommended. Some older browsers may strictly require the legacy .cur format.

Why is my custom cursor not showing up in the preview?

Common reasons include an invalid or broken image URL, missing CORS headers if loading from an external domain, incorrect hotspot coordinates, or forgetting to include a valid fallback cursor. Always ensure your fallback is a standard CSS keyword like auto or default.

Do I always need to specify a fallback cursor?

Yes. When using a custom image URL for a cursor, the CSS specification requires a fallback standard cursor keyword. If the browser cannot load the custom image due to network issues, format incompatibility, or size limits, it will immediately use the fallback to ensure the user still has a functional pointer.

Can I use relative paths for custom cursor images?

Yes, you can use relative paths (e.g., /assets/cursors/my-cursor.png) if the image is hosted on the same domain as your website. For external images, you must provide a complete absolute URL starting with http:// or https://.

Related tools

More utilities you might find handy.

CSS

Box Model Visualizer

Interactive CSS box model visualizer with real-time editing of margin, border, padding, and content dimensions
CSS

CSS Animation Generator

Generate CSS keyframe animation code
CSS

CSS Button Generator

Design and generate custom CSS button styles with live preview and instant code export.