EN
PortuguêsEnglishEspañol
All tools
Developer tools 100% free

Custom cursor generator (CSS)

Choose an image (PNG or SVG) or build a circle cursor. Hover over the test area to try it before copying.

How to use

Thank you so much for helping!

Every donation helps pay for the servers and keeps the tools free for everyone. Pick or type an amount:

Secure payment by Stripe. Opens in a new tab.
Back to CSS and design

A mouse cursor that matches your site

Hover here to test
and here on a link







  
Available in: PortuguêsEnglish


Advertisement



  
Custom cursor generator (CSS): what it is for
A custom cursor reinforces the identity of portfolios, brand sites and games. Choose a circle (ring, filled or ring with a dot) in the color and size you want, or upload a PNG or SVG image, set the click point and try it in the test area.
The CSS comes out with the image as a data URI, the hotspot, a fallback cursor and the option to keep the pointer hand on links and buttons. The tool warns you when the image is over 128 px, the limit above which browsers ignore the cursor.
How to use
  1. Choose circle or image.
  2. Adjust the color, size or click point.
  3. Test and copy the CSS.
When to use it
  • Designer portfolio.
  • Brand or campaign site.
  • Game pages.

  
Frequently asked questions
What is the maximum cursor size?
Browsers accept cursor images up to 128 by 128 px; above that, they ignore the image and use the fallback cursor. The safest and most comfortable size is 32 px.
What is the click point (hotspot)?
It is the pixel of the image that counts as the cursor's tip. On an arrow, it is at the tip; on a circle, at the center. The two numbers after the image URL in the CSS are that point's position.
Can a custom cursor get in the way?
It can if it is small, low-contrast or has the click point in the wrong place. Use it on sites with a strong identity (portfolio, game, brand) and always keep the pointer hand or equivalent on links to show they are clickable.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

  
Similar tools

  
Scroll reveal animation (pure CSS)Generate the effect of elements appearing as the page scrolls (scroll reveal) in pure CSS, with animation-timeline: view(): fade in, slide up, slide in from the sides, grow or unblur, with adjustable distance and scroll range, and without hiding anything in browsers that do not support it yet.Open →
CSS clamp() calculator for fluid typographyCalculate the CSS clamp() for text and spacing that grows with the screen width: enter the size on mobile and on desktop and the screen widths, and copy the value in rem, with a preview and a zoom accessibility warning.Open →
Google Fonts pairingsTry Google Fonts pairings for your website's headings and body text: pick a ready-made pair or build your own, see the preview with your text and copy the loading link and the CSS.Open →
Color contrast checker (WCAG)Check whether your text color has enough contrast with the background under the WCAG AA and AAA accessibility rules, with a live preview.Open →
Color converterConvert colors between HEX, RGB, HSL and CMYK and see lighter and darker shades.Open →
HEX color to Tailwind classFind out which color in the default Tailwind CSS (v3) palette is closest to your HEX or RGB color, with the perceptual distance and the five nearest options, or use the exact value with bracket syntax.Open →






The tools are provided as is, without warranty. We are not responsible for the results or for how they are used.