Cursor CSS generator
Cursor CSS that falls back gracefully
Fill in your image paths and hotspot, add a 2× image and fallbacks, and get a cursor rule that every browser can use, checked against the size limits browsers apply.
Your CSS
.game-board {
cursor: url("/cursors/cove-arrow.png") 0 0, auto;
cursor: -webkit-image-set(url("/cursors/cove-arrow.png") 1x, url("/cursors/cove-arrow@2x.png") 2x) 0 0, auto;
cursor: image-set(url("/cursors/cove-arrow.png") 1x, url("/cursors/cove-arrow@2x.png") 2x) 0 0, auto;
}- 32 × 32 is within the recommended 32 × 32, so every desktop browser can show it.
Preview
Point here: a sample cursor stands in until you check your own image
a test linkHow the rule is built
The first line is the plain one, url() with the hotspot and a keyword, which every desktop browser understands. The image-set() lines come after it: a browser that cannot read them drops them and keeps the line before, and one that can picks the 2× file on high-density screens. Give the hotspot in 1× pixels.
A backup image is tried when the first will not load, handy for an SVG cursor with a PNG behind it. The keyword at the end is required, and it is what people see if no image loads.
Size guidance
Draw cursors at 32 × 32 and the 2× copy at 64 × 64. MDN recommends 32 × 32, Firefox has limited custom cursors to that size since version 67, and Firefox and Chromium ignore anything over 128 × 128 (MDN).
Questions
Can I use an SVG as a cursor?
Yes, if it has a width and height. Put a PNG behind it as the backup image.
Why is my cursor not showing?
Usually a wrong path, a missing keyword or an image over the size limit. Open the image's address on its own to check the path.
Do the paths work relative to the CSS file?
Yes. Like any url(), a relative path is resolved from the stylesheet, so a path starting with / is the safest.