🎨 Custom Cursor Generator

Create your own unique mouse pointer in seconds with this mouse pointer creator. It’s a fun and easy tool to design stylish cursors right in your browser. You can choose from dozens of styles or make your own from scratch — totally cursor free and super simple to use. Whether you want a clean minimal look or something animated, this free custom cursor tool gives you full control and instant preview. No coding skills needed, just creativity (and maybe a bit of curiosity 😅)

Choose a Preset

Customize

Primary Color

#FFD700

Secondary Color

#FFFFFF

Cursor Size: 24px

Stroke Width: 2px

Live Preview

Move your mouse here to see the cursor in action!
Select a preset and customize it.

Generated Code

/* Select a preset and click Generate to see the CSS code */

<!-- Select a preset and click Generate to see the HTML example -->

📚 How To Use

Choose a Preset

Select one of the 48 preset cursor designs from the grid above. Presets marked with ✨ are animated (24 animated presets available)! Each preset has a unique style including rainbow splash, color smoke, fire trails, and many more effects.

Customize Your Cursor

Adjust the colors, size, and stroke width to match your website's design. The live preview updates in real-time as you make changes.

Generate the Code

Click the "Generate Cursor" button to create your custom SVG and CSS code. The code will appear in the output section below.

Save the SVG File

Copy the SVG code and save it as a .svg file (e.g., cursor.svg). You can save this file in your project's assets or images folder.

// Save as: cursor.svg

Add CSS to Your Website

Copy the CSS code and add it to your stylesheet. Make sure the path to the SVG file is correct. You can apply it to specific elements or the entire page.

/* Apply to entire page */
body {
    cursor: url('cursor.svg'), auto;
}

/* Or apply to specific elements */
.button {
    cursor: url('cursor.svg'), pointer;
}
                    

Alternative: Inline SVG Method

Instead of saving as a file, you can use the data URI method directly in your CSS. This embeds the SVG code directly in your stylesheet.

body {
    cursor: url('data:image/svg+xml;utf8,<svg...>'), auto;
}
                    

Tips & Best Practices

• Always include a fallback cursor (e.g., auto, pointer)
• Keep cursor size between 16-32px for best usability
• Test on different backgrounds to ensure visibility
• Consider adding a hover state for interactive elements
• Make sure the cursor hotspot (click point) is clearly visible
• Animated cursors use CSS animations embedded in SVG - they work in all modern browsers!
• For animated cursors, the inline SVG method (data URI) works best