CSS Cursor Gallery

Explore all CSS cursor types and create custom SVG cursors.

Built-in Cursor Types

General

Links & Status

Selection

Drag & Drop

Resize

Zoom

Live Preview — pointer

Hover here to see

pointer

.element {
  cursor: pointer;
}

Custom SVG Cursors

Hover to preview custom cursor

/* SVG encoded as data URI */
.custom-cursor {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='10' fill='none' stroke='%23000' stroke-width='2'/><circle cx='16' cy='16' r='2' fill='%23000'/></svg>") 16 16, auto;
}

Custom Cursor Tips

SVG must be URL-encoded (replace # with %23)
Hotspot coordinates define the click point (default: 0 0 = top-left)
Always provide a fallback cursor keyword (e.g. auto)
Max size is browser-dependent (typically 128×128px)