Design.dev design.dev

Custom Cursor Generator

Create custom CSS cursors with image upload, hotspot positioning, and fallback options. Real-time preview with copy-paste ready code.

Cursor Presets

Preview

Move your cursor here to preview
cursor: pointer

Custom Cursor Image

Click to upload or drag and drop
PNG, SVG, JPG, WebP, or GIF — auto-resized to PNG (max 128x128px recommended)
px
Adjust the actual pixel size of your custom cursor image

Generated CSS

/* Upload an image or select a preset to generate CSS */

Related Guides

CSS Selectors Guide

Target elements for custom cursors

FAQ

What image formats work for custom CSS cursors?

Custom cursors support .png, .svg, .ico, and .cur files. Images should be 128×128 pixels or smaller for best cross-browser compatibility.

Why do I need a fallback cursor?

A fallback cursor (like auto or pointer) ensures users still see a cursor if the custom image fails to load. Always include one as the last value in your cursor property.

Are custom cursors accessible?

Custom cursors can reduce accessibility if they're hard to see or don't convey purpose. Ensure your cursor has sufficient contrast, a reasonable size, and avoid replacing system cursors for standard interactive elements.

CSS copied!