When should I use cursor: pointer?

Use it for clickable elements that aren't native links or buttons styled as such, so users know they can click.

Can I use a custom image cursor?

Yes: cursor: url(cursor.png) 4 4, auto; — always include a keyword fallback.

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

Hover the preview area to try each cursor value and copy the cursor declaration for your element.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Cursor

Class name

Live preview

Generated CSS

.clickable {
  cursor: pointer;
}

.clickable {
  cursor: pointer;
}

01Adjust the controls on the left or pick a preset to start the CSS Cursor Generator.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.