CSSKit

CSS Cursor Generator | Custom Cursor Preview Tool - CSSKit

Free CSS cursor generator. Preview all CSS cursor types and generate custom cursor styles. See pointer, crosshair, grab, zoom, and more in action.

General

Drag & Drop

Zoom

Resize

Hover over this area to preview the cursor

cursor: pointer;

What is CSS Cursor Generator?

CSS Cursor Generator is a free online tool for previewing and generating CSS cursor styles. It displays all built-in CSS cursor values with live hover previews and supports custom cursor images with hotspot coordinates.

How to Use CSS Cursor Generator

Browse the gallery of CSS cursor types. Hover over each cursor preview area to see the cursor in action. Click on any cursor to select it. Optionally set a custom cursor image URL with x/y hotspot coordinates. Copy the generated CSS cursor property.

How CSS Cursor Generator Works

The tool renders a grid of all CSS cursor keyword values. Each cell sets the cursor property so you can hover to see the actual cursor. When you select a cursor type, the CSS code is generated. You can also provide a custom image URL with hotspot coordinates for fully custom cursors.

Common Use Cases

  • Choosing the right cursor for interactive elements
  • Previewing cursor styles before implementing
  • Creating custom cursor effects for creative websites
  • Setting appropriate cursors for drag-and-drop interfaces
  • Generating cursor CSS for game or interactive app UIs

Frequently Asked Questions

What CSS cursor types are available?▼

CSS supports many cursor types including default, pointer, crosshair, move, text, wait, help, progress, not-allowed, grab, grabbing, zoom-in, zoom-out, col-resize, row-resize, and more.

Can I use a custom image as a cursor?▼

Yes, CSS supports custom cursor images using url() with an optional hotspot (x, y) coordinate and a fallback keyword.

What image formats work for custom cursors?▼

Most browsers support .cur, .png, .gif, and .svg formats for custom cursors. PNG is the most widely supported format.

What is a cursor hotspot?▼

The hotspot is the point within the cursor image that represents the exact click position. It is specified as x and y pixel coordinates from the top-left corner of the image.

Related Tools

CSS Animation Generator

Free CSS animation generator. Create keyframe animations with visual controls fo...

CSS Transition Generator

Free CSS transition generator with easing function visualizer. Create smooth CSS...

CSS Filter Generator

Free CSS filter generator. Apply blur, brightness, contrast, grayscale, hue-rota...

CSS Border Generator

Free CSS border generator. Create borders with custom width, style, color, and b...