Live preview • custom cursors

CSS Cursor Generator

Preview every built-in CSS cursor keyword live, then upload an image to build a custom cursor with a precise hotspot and copy-ready CSS.

Cursor keyword reference

Hover to preview • click a tile to copy its CSS

Custom image cursor builder

Upload an image and set the hotspot
Cursor image preview
16px
16px
Hover here to test your custom cursor
Ready-to-use CSS

🔒 Your uploaded image stays on your device and is never uploaded.

Choose the right cursor for the interaction

A well-chosen cursor tells visitors what will happen before they click. Use this free online CSS cursor generator to compare every built-in keyword side by side, then build a fully custom image cursor with a precise hotspot when the default set is not enough.

Full keyword reference

Browse pointer, grab, crosshair, text, wait, help, zoom and every other native CSS cursor keyword in one live grid.

Custom image cursors

Upload any image, position the hotspot precisely, and get a ready-to-paste cursor: url(...) declaration.

Private by design

Everything runs locally in your browser. Your image is converted to a data URI and never leaves your device.

CSS cursor generator FAQ

What is the CSS cursor property?

The cursor property sets the mouse pointer style shown when hovering an element, using keywords like pointer, grab or crosshair, or a custom image.

How do I create a custom CSS cursor?

Upload an image, set the hotspot x and y coordinates that mark the pointer's active point, then copy the generated cursor: url(...) x y, auto; CSS.

What is a cursor hotspot?

The hotspot is the exact pixel in your cursor image that represents the click point. It is usually the tip of an arrow or the center of a dot.

Why does my custom cursor use a data URI?

A data URI embeds the image directly inside the CSS so the cursor works immediately without hosting a separate image file.

Is my uploaded image sent to a server?

No. The image is read and converted to a data URI locally in your browser and never uploaded.

Continue with the CSS Shadow Generator, Multi-Layer Shadow Generator, CSS Button Generator, or Checkbox Toggle Generator. Browse all online tools.