Custom SVG Cursor CSS Generator

Configure the SVG cursors for html and for a, button, input[type=radio], input[type=checkbox].

Base Cursor (html)

Shape:

Outer shape Size (px): Color: Opacity: 0.5

Inner shape Size (px): Color: Opacity: 1

Cursor Hotspot (Origin) for Base Cursor

Select the origin point (hotspot) inside the cursor image.

Note: If you pick a shape that can't have inner shape (like triangle), inner shape will be also drawn as the same shape but smaller, same fill.

Shape:

Shape Size (px): Color: Opacity: 1

Cursor Hotspot (Origin) for Hover Cursor

Select the origin point (hotspot) inside the cursor image.

Note: Only one shape here.

Hover or interact with links, buttons, radios, and checkboxes to see the cursors applied using CSS variables.

Try hovering this link, , radio, checkbox.

The base cursor is applied to this entire box and document.