Custom cursor size limits in Chrome, Firefox and Safari

The rules at a glance

Browser	Largest image	Near the edges of the page
Chrome and Edge 156 and later	128x128 CSS px	Any custom cursor that would stick out of the visible page is skipped
Chrome and Edge 75 to 155	128x128 CSS px	Cursors larger than 32x32 are skipped when they would stick out
Firefox 67 and later	128x128 CSS px	Cursors larger than 32x32 are skipped when they would stick out
Safari	128x128 CSS px	Any custom cursor that would not fit inside the visible page is skipped

“Skipped” means the browser moves on to the next image in your cursor list, and finally to the keyword.

Rule 1: 128x128 is the ceiling

Chrome, Edge, Firefox and Safari all ignore cursor images wider or taller than 128 CSS pixels. They do not shrink them, they skip them. The CSS specification does not set a size limit; this is a browser safety rule, and MDN recommends staying at 32x32.

Rule 2: cursors must not cover the browser’s own interface

A large, mostly transparent cursor can draw a fake pointer anywhere inside its image. Sites abused this to make it look as if the pointer was over the address bar or a permission prompt while the real click landed somewhere else. Browsers answered by checking where the cursor image would be drawn:

• The browser places the image so its hotspot sits on the pointer.
• If that rectangle would stick out of the visible page area, the cursor is skipped.
• Firefox, and Chrome up to version 155, only apply the check to images larger than 32x32.
• Chrome 156, the stable release of October 2026, applies it to every custom cursor whatever its size. Safari already does.

So near the top of the page, close to the scrollbar or at the left edge, people see your fallback instead of your image.

Rule 3: pixel density and zoom count

Limits are measured in CSS pixels, not image pixels:

• A 64x64 image marked as 2x with image-set() counts as 32x32.
• On a Mac with a larger pointer size set in Accessibility settings, macOS draws custom cursors larger as well, and Chrome counts that larger size when it checks the edges.
• An SVG without its own width and height is sized by the browser: Safari treats it as 32x32, Chrome uses the system cursor size.

How to design inside the limits

1. Make it 32x32. It matches the system cursor and stays clear of the 32 px exemption in Firefox and older Chrome.
2. Keep the hotspot near the top-left for pointing cursors. With the hotspot at 4 2, almost all of the image hangs below and to the right of the pointer, so it clips mainly at the right and bottom edges, and only within a few pixels of the top and left.
3. Choose a fallback that means the same thing. People will see it near the edges. auto behind an arrow, pointer behind a hand.
4. For anything bigger, use an element, not a cursor image. A JavaScript follower such as the dot and ring follower is an ordinary element on the page, so none of these limits apply.

How to test

1. Open the page in Chrome, Firefox and Safari.
2. Move the pointer slowly to the top edge, the left edge and onto the scrollbar, and watch for the swap to the fallback.
3. Zoom the page to 200 percent and repeat.
4. On a Mac, raise Pointer size in Accessibility settings and repeat in Chrome.

FAQ

Why does my 64x64 cursor disappear at the top of the page?

It is larger than 32x32, so Firefox and Chrome skip it whenever any part of it would extend past the visible page. Shrink it to 32x32, or move the hotspot so less of the image sits above and to the left of the pointer.

Can I make a cursor bigger than 128x128?

Not as a CSS cursor. Hide the system cursor in one section and draw your own element that follows the pointer; the hide-native-cursor pattern shows how to do that safely.

Do these limits apply to the system’s own cursors?

No. They only apply to images you set with url(). Keyword cursors, and the larger pointer sizes people choose in their system settings, are drawn by the operating system.