FreeDev Tools

CSS Cursor Generator

Preview every CSS cursor value live and copy the rule — all 32 standard cursors.

hover this area to feel the cursor
.element {
  cursor: pointer;
}

/* preview */
.cursor-demo {
  cursor: pointer;
}

Generated locally in your browser — nothing is uploaded.

How to Use

  1. 1

    Pick a cursor

    All 32 standard values in the dropdown.

  2. 2

    Hover the preview

    Feel the cursor exactly as users will.

  3. 3

    Copy the CSS

    One rule, ready for your stylesheet.

Frequently Asked Questions

32 standard values — from the everyday pointer, grab, and text to specialty ones like col-resize, zoom-in, and not-allowed. The dropdown covers all of them with a live hover area.

Related Tools

CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visually