Open menu

CSS Cursor Generator

Explore all 36 built-in CSS cursor keywords by hovering over them, or design your own cursor from ten SVG shapes, including dot, ring, ring with dot, crosshair, arrow, hand, plus, target, pen and star. Set the size, fill and outline colors and a fallback keyword. The hotspot is placed where you expect it, such as the arrow's tip or the ring's center. Export CSS, Tailwind or the SVG file.

Preset gallery
Move your pointer here

Move your pointer over the box to try the cursor. The hotspot is set for the shape, for example the tip of the arrow.

Accessibility checks

  • Pass 32px works everywhere. 32px is the safe maximum for custom cursors.
  • Pass The outline has 6.3:1 contrast with the fill, so the cursor stays visible on light and dark backgrounds.
  • Pass A fallback cursor (auto) is included in case the image fails to load.
  • Pass Touch screens have no cursor, so don't rely on a custom cursor to communicate anything important.

Export code

.custom-cursor {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%225%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%234F46E5%22%20stroke-width%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%223%22%20fill%3D%22%234F46E5%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") 16 16, auto;
}
Favourites on this device (0)

No favourites yet.

Cursor
Type
Fill color
Outline color
Apply to

How to use the cursor generator

  1. Choose a type: Built-in to pick a keyword, or Custom to design an SVG cursor.
  2. Built-in: hover the tiles to feel each cursor, then pick one from the menu. The highlighted tile is the one in your code.
  3. Custom: choose a shape, set its size, fill and outline colors, and pick a fallback keyword.
  4. Choose the scope: one element or the whole page.
  5. Export CSS, Tailwind or the SVG file.

Built-in cursor meanings

  • pointer: links and clickable elements.
  • text: selectable text and inputs.
  • not-allowed: disabled actions.
  • grab / grabbing: draggable items and while dragging.
  • zoom-in / zoom-out: images that enlarge.
  • progress / wait: work happening in the background or blocking.
  • resize cursors (col-resize, nwse-resize…): edges you can drag to resize.

Using cursors for their usual meanings helps people predict what will happen.

Worked examples

Use the built-in zoom-in cursor on thumbnails that open a larger view. It’s instantly understood, and you don’t need a custom image.

Example 2: a drawing app

Use the custom Pen shape with your brand color and a white outline, with crosshair as the fallback. Apply it only to the canvas element, so the rest of the interface keeps normal cursors.

Example 3: a creative portfolio

Use Ring dot at 32px on hero areas. Keep the default cursor on text and controls, so people can still select text and see links clearly.

Tips

  • Keep custom cursors to small areas where they add meaning.
  • Always include an outline color that contrasts with the fill.
  • Don’t hide the cursor (cursor: none) unless you draw a replacement that is always visible.

Common mistakes

  • No fallback. Without a keyword after the image, the whole cursor declaration is invalid and ignored.
  • The wrong hotspot. If the hotspot is at the corner of a ring cursor, clicks land in the wrong place. The generator places it on the center or the tip for each shape.
  • Large cursors. Anything above 32px may be scaled or ignored, and it covers the content people are trying to see.
  • Custom cursors over text. Keep the text cursor on selectable text so people know they can select it.

Frequently asked questions

How does a custom cursor work in CSS?

cursor: url(image) x y, fallback sets an image as the cursor. x and y are the hotspot, the exact pixel that clicks. The fallback keyword is required and is used if the image can't be loaded. The generator embeds the SVG as a data URI, so there's no extra file.

What size should a custom cursor be?

32 × 32px is the safe choice. Many systems scale larger cursors down, and browsers ignore cursor images over 128px. The check warns above 32px.

Are custom cursors accessible?

Built-in cursors respect system settings such as larger or high-contrast pointers; custom images don't. Use custom cursors for specific areas, like a drawing canvas, rather than the whole site. Always give them a contrasting outline so they stay visible on any background.

Do cursors work on phones?

No. Touch screens have no cursor, so never use one to communicate something important.

How do I go back to the normal cursor?

Set cursor: auto, or remove the rule. Always list a fallback keyword after a custom image, such as cursor: url(pointer.svg) 4 4, pointer, so a cursor still shows if the image fails.

Sources