Question 1

What CSS cursor values are available?

Accepted Answer

CSS supports 35+ cursor keywords: auto, default, pointer, crosshair, move, text, wait, help, not-allowed, progress, grab, grabbing, zoom-in, zoom-out, col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu, cell, vertical-text, alias, copy, no-drop, all-scroll. The browser falls back to a generic arrow if a custom value is unsupported.

Question 2

Can I use a custom image as a cursor?

Accepted Answer

Yes. Switch to the Custom Image tab, upload a .cur, .png or .svg file (max 32×32 px is recommended for crispness on high-DPI displays), and the tool will output the proper cursor: url('...') x y, auto syntax with a fallback. You can also set the hotspot offset to align the click point with a specific pixel.

Question 3

Why is my custom cursor not showing on every browser?

Accepted Answer

Safari only honors .cur files and may ignore .png/.svg cursors. Firefox supports .cur, .png and animated .gif, but ignores .svg cursors. Chrome supports .cur, .png, .svg and even .jpg. The generated CSS always includes a fallback (auto) so the page stays usable if a browser refuses the image.

Question 4

Does the cursor size matter?

Accepted Answer

Yes. The OS will resample cursor images larger than 32×32 and they often look blurry. Use 32×32 (or 24×24) PNG with a transparent background, or use .svg which the browser rasterizes at runtime. For best sharpness on Retina/4K displays, ship a 64×64 version and let the browser downscale.