CSS Cursor Generator

How to use

1. 1Choose Custom cursor to build an image pointer, or Keyword reference to browse the native cursor values.
2. 2In the custom builder, pick a built-in shape and set its colors and size, or switch to Upload image and choose a PNG, GIF, WebP, or SVG.
3. 3Set the hotspot X and Y to the pixel that should point at the target. For an arrow use the tip; for a dot or crosshair use the center.
4. 4Pick a fallback keyword. It is shown when the image cannot load or is too large for the browser to use.
5. 5Move your mouse over the live preview to confirm the cursor, then copy the CSS rule, the cursor value, or the Tailwind class.
6. 6In Keyword reference, hover any tile to see the real cursor and click Copy to grab its cursor declaration.

About this tool

CSS Cursor Generator does two jobs that web developers reach for constantly: it builds a custom image cursor you can drop straight into a stylesheet, and it lets you preview every native cursor keyword the way they actually look on your machine. The CSS cursor property controls the mouse pointer over an element. It accepts about 35 standard keyword values (auto, default, pointer, text, crosshair, move, grab, grabbing, not-allowed, the eight directional resize values, zoom-in, zoom-out, and more), and it also accepts one or more url() images followed by a mandatory keyword fallback. The catch with the keywords is that the glyph for each value is drawn by the operating system, not by the browser, so a screenshot of a pointer on Windows looks different from the same value on macOS or Linux. The only honest preview is to hover an element that really sets that value, which is exactly what the keyword reference here does: every keyword renders as a tile with cursor set to that value, grouped by purpose (general, links, selection, drag and drop, resize, zoom), and clicking a tile copies the cursor declaration for that value. The custom builder produces the url() form. You either pick a built-in shape (arrow, dot, ring, crosshair, or pointing hand) that is drawn as an SVG with colors and a size you choose, or you upload your own PNG, GIF, WebP, or SVG. Either way the image is encoded as a data URI, so the finished cursor needs no image hosting and works when pasted into any project, a CodePen, or an inline style. Two details make a custom cursor behave correctly, and the tool handles both. First, the hotspot: the two numbers after the url() set the pixel inside the image that actually points at the target, measured from the top-left corner, so an arrow uses its tip while a crosshair or dot uses its center. Second, the fallback: the CSS spec requires a generic keyword after any url() list, shown when the image cannot load or is larger than the browser will accept, so the tool always appends one you select. Browsers reliably honor cursor images up to 128 pixels and silently fall back to the keyword for anything larger, so the size control is capped accordingly and the tool warns when an uploaded image exceeds that limit. The output panel gives you the full CSS rule, the bare cursor value, and a Tailwind arbitrary-value class with spaces converted to underscores. The live preview area applies the real cursor so you can move your mouse over it and feel the result, and it shows the source art at actual size next to it. Everything runs in your browser. Uploaded images are read locally with the File API and embedded inline, so nothing you load here is ever sent to a server.

Free to use. Works in your browser. No signup, no login.