Preview Area

Move your mouse here to see the cursor cursor: default

CSS Cursor Values

Custom Cursor

Supports PNG/SVG/GIF/CUR formats. Recommended 32×32 pixels.

Hotspot (click point):

X

Y

CSS Output

cursor: default;

💡 How to Use

1. Click any cursor card to preview instantly
2. Upload a custom image to use as cursor
3. Click "Copy CSS" to copy to clipboard

❓ FAQ

What are common CSS cursor values?

The CSS cursor property defines the mouse pointer style when hovering. Common values: default (standard arrow), pointer (hand, clickable), text (text selection), wait (loading), grab/grabbing (draggable/dragging), zoom-in/zoom-out, etc. Browser and OS may render them slightly differently.

How to use a custom cursor image?

Use the syntax: cursor: url('image.png'), auto; The first value is your custom image URL, followed by a fallback value. Recommended size: 32×32 pixels. Supported formats: .cur, .png, .svg, .gif. You can specify hotspot coordinates: cursor: url('image.png') 4 4, auto; where (4,4) is the click point.

Are custom cursors cross-browser compatible?

All modern browsers support custom cursors. Use .cur or .png for best compatibility. Always include a standard fallback cursor value after url(), e.g., cursor: url('custom.cur'), pointer; SVG format is not supported in older browsers.

Can CSS cursor be animated?

CSS cursor itself doesn't support animation. For dynamic cursor effects, consider CSS animations on the hovered element instead. Multi-frame GIF cursors don't play their animation in most browsers. Keep cursors simple for good UX.

🖱️ CSS Cursor Visualizer