CSS Custom Cursor Generator

Most operating systems render cursors between 24px and 48px. We recommend staying within 24–48px for the best cross-platform experience. Cursors larger than 64px may be clipped or scaled down by the browser. The default size of 32px works well for most designs. Keep in mind that high-DPI (Retina) displays may render the cursor at a higher pixel density, so a slightly larger SVG (like 32–40px) often looks best.

Custom CSS cursors using SVG data URIs are supported in all modern browsers: Chrome 68+, Firefox 65+, Safari 12+, and Edge 79+. For older browsers, the fallback keyword (e.g., auto or pointer) ensures a functional default cursor is displayed. Internet Explorer has limited support — it requires .cur or .ani files instead of SVG. For modern web projects targeting current browsers, SVG data URI cursors are fully reliable.

Absolutely! You can generate multiple cursor variations and apply them to different CSS states. For example: a:hover { cursor: url(hover-cursor.svg) 16 16, pointer; } and a:active { cursor: url(click-cursor.svg) 16 16, pointer; }. This allows you to create interactive feedback — like a cursor that changes color on hover or shrinks slightly on click. Simply generate each variant separately and combine them in your stylesheet.

Mobile devices use touch input and don't have a visible mouse cursor, so custom CSS cursors won't appear on smartphones or tablets. This is expected behavior — the cursor property is designed for pointer-based devices (mice, trackpads, styluses). Your custom cursor will display correctly on desktop and laptop computers. The CSS you generate here is still valid; it simply has no visual effect on touch-only devices.

Enable the "Drop Shadow" toggle in the Customize panel. This adds an SVG <filter> with feDropShadow to your cursor, creating a subtle shadow effect. The shadow enhances contrast against light backgrounds and gives the cursor a modern, elevated look. You can further tweak the shadow by adjusting the SVG filter parameters in the downloaded SVG file if you need more control.

Yes! While this tool focuses on SVG shape cursors, you can use any PNG, SVG, or .cur file as a cursor with: cursor: url(your-image.png) x y, auto;. For best results, use small images (32×32 to 48×48 pixels) with transparent backgrounds. SVG is recommended for sharp rendering at any size. You can also convert icons from Font Awesome or other icon libraries into SVG cursors by copying their SVG paths into a custom template.

The hotspot is the precise pixel within the cursor image that triggers clicks and interactions. For an arrow cursor, the hotspot is at the tip (so clicking the tip activates the element). For a crosshair, it's at the center intersection. An incorrectly placed hotspot makes the cursor feel "off" — users may click slightly away from where they expect. Our presets automatically set sensible hotspot values, but you can fine-tune them in the Advanced panel for pixel-perfect accuracy.