Free online CSS cursor generator. Visually preview all CSS cursor property values, support custom cursor image URLs and hotspot coordinates. One-click copy CSS code. Pure frontend, no registration required.
The CSS cursor property sets the mouse pointer type displayed when hovering over an element. Proper cursor usage enhances UI interactivity and usability, letting users intuitively understand element functions. For example, links use pointer, draggable elements use grab/grabbing, non-interactive elements use not-allowed.
1. Image size: max 32x32px for compatibility, 128x128px absolute max; 2. Format: prefer SVG (scalable), then PNG and CUR; 3. Hotspot: specify click position, default (0,0) is top-left; 4. Fallback: always provide standard cursor as backup, e.g., cursor: url('custom.png') 4 4, auto;; 5. Performance: avoid large cursor images that affect rendering.
Cursors are important visual feedback for user interaction. Pointer suggests clickability, move suggests draggability, text suggests input, not-allowed suggests unavailable actions. Correct cursor usage reduces user confusion and improves efficiency. In custom web apps, well-designed cursors enhance brand identity and immersion.
General cursors (auto, default, none), link/status cursors (pointer, progress, wait), selection cursors (text, crosshair, vertical-text), resize cursors (n-resize, e-resize, etc.), zoom cursors (zoom-in, zoom-out), and custom cursor URLs.
Use cursor: url('image-path'), auto; syntax. Supported formats: .cur, .png, .gif, .svg. Specify hotspot coordinates like cursor: url('cursor.png') 4 4, auto; for click position at (4,4). Recommended max size: 128x128 pixels.
1. Recommended max 128x128px (some browsers limit to 32x32); 2. Supported formats: .cur, .png, .gif, .svg; 3. Must provide fallback cursor value; 4. Image must be same-origin or support CORS.