---
title: "Cursor CSS Generator: image-set & Fallbacks | Cursor Cove"
description: "Write a CSS cursor rule with a hotspot, a 2× image-set, fallback images and a keyword, with size checks against browser limits and a live preview."
url: https://cursorcove.click/cursor-css-generator/
---

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.

## How 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.

Before you ship, [test the cursor in a disposable browser on WebTraceCheck](https://webtracecheck.com/): open your page in Chrome, Firefox, Edge or Brave on a throwaway Linux desktop and point at it.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)).

## 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.