CSS Cursor Gallery

Browse all CSS cursor values interactively. Hover any card to preview the cursor, then click to copy the CSS snippet. Use the search box or category tabs to filter.

All General Links & Status Selection Drag & Drop Resize Zoom

⚙ Custom Cursor URL Builder

Upload cursor image (PNG, ICO, SVG) 📷 Choose image
Hotspot X (px) Hotspot Y (px) Fallback cursor autodefaultpointercrosshairmovegrabnone

Preview (hover here)

Hover here to preview your cursor

Generated CSS

/* Upload an image to generate CSS */

Copy CSS

CSS Animations CSS Animation Generator CSS Buttons CSS Button Generator

How to Use CSS Cursors

Set the cursor on any element using the cursor CSS property:

/* keyword cursor */
.btn { cursor: pointer; }

/* custom image cursor */
.custom { cursor: url('/cursors/my-cursor.png') 0 0, auto; }

The cursor property accepts a comma-separated list — the browser uses the first value it supports, falling back to the last. Always end custom cursor lists with a CSS keyword such as auto or default.

Browser Support

All keyword cursor values listed above are supported in every modern browser (Chrome, Firefox, Safari, Edge). Custom URL cursors support PNG, SVG, and ICO formats; recommended maximum size is 128×128 px.

Related tools: CSS Animation Generator  |  CSS Button Generator