CSS makes custom cursors look like one line of code. Browsers add several rules that make them fail silently.
The syntax
.my-area { cursor: url("pointer.cur"), auto; }
The final keyword is required as the fallback.
The rules
128 px maximum. Chrome and Firefox refuse larger cursor images.
32 px is the practical size. Chrome hides cursors bigger than 32 px when they touch its own interface, and MDN recommends 32 x 32.
Multi-size .cur files backfire. Chrome and Firefox use the largest image, so a Windows-style file with 128 px inside shows a huge pointer.
Setting the click point
Two ways. Store it in a .cur file and give no numbers in the CSS, or use a PNG and give it in CSS, measured from the top-left:
cursor: url("pointer.png") 4 2, auto;
If it doesn't show
Check the file path, the image size, and the fallback keyword first.
To make a 32 px cursor with the click point stored inside, use the website preset in our free tool at flipconverto.com/convert/png-to-cur, which also has a live test box. It's our own tool.
Sources: MDN, "cursor" (https://developer.mozilla.org/en-US/docs/Web/CSS/cursor); W3C, CSS Basic User Interface Level 4.
Note: this article was drafted with AI assistance and checked against our own test results.
Top comments (0)