Free Browser Cursor Converter

2 Configure Your Cursor

Cursor Size (32x32 recommended):

Set Hotspot:

Click on the preview below to define the exact point of your cursor.

Hotspot: (0, 0)

Hover here to see your cursor in action

Save the optimized cursor image.

.custom-cursor {
                                cursor: url('cursor.png') 0 0, auto;
                            }

Follow these simple steps to add your new cursor to your website:

Download the Image: Download the .png file generated by the tool.
Upload to Your Website: Upload the downloaded cursor.png to your website's assets or images folder. Make sure you know the path to the file.
Copy the CSS: The tool provides a CSS snippet. Copy this code into your website's stylesheet (e.g., style.css).
Update the Path: In the copied CSS, make sure the url('cursor.png') points to the correct location where you uploaded your image. For example, it might be url('/images/cursor.png').
Apply the Class: Add the class custom-cursor to any HTML element you want to have the new cursor. To apply it to the whole page, add it to the body tag: <body class="custom-cursor">.
All Done: Save your changes and visit your website. Your new cursor should now be active!