This free CSS cursor generator lets you preview and copy the CSS cursor property, which controls the mouse pointer shown when a user hovers over an element. Hover any option in the list to see that cursor demonstrated instantly, from common values like pointer, default, and text to grab, wait, not-allowed, crosshair, and the full set of directional resize cursors. When you find the one you need, click Copy to grab the generated CSS declaration and paste it straight into your stylesheet. Looking for cool fonts too? Try our Font Keyboard app on iOS and Android.

Frequently Asked Questions

What does the CSS cursor property do?

The CSS cursor property sets which mouse pointer appears when the user hovers over an element. You apply a keyword value like cursor: pointer; or cursor: not-allowed; to a selector to signal what kind of interaction is available.

How do I make an element show a hand pointer on hover?

Use cursor: pointer; on the element. This displays the hand cursor typically used for links, which is helpful for clickable elements such as buttons or divs that aren't native anchors.

What is the difference between cursor: auto and cursor: default?

auto lets the browser choose the cursor based on context (for example a text I-beam over text), while default forces the standard arrow cursor regardless of the underlying content.

Can I use a custom image as a cursor in CSS?

Yes. Use cursor: url(image.png), auto; where the URL points to your image and the trailing keyword is a required fallback. Browsers generally limit custom cursors to about 32x32 pixels and support formats like PNG, SVG, or CUR.