CSS Cursor Generator

Fast, accurate and free online cursor css generator tool running directly in your browser.

Secure (SSL)

Client-Side Processing

100% Free

Go to tool

Instructions

1

Enter data
Enter content, paste text or load a file from disk.
2

Click the button
The tool will immediately process your data in the browser.
3

Get the result
Copy the finished text or save the file to your device.

                                                function runTool() {

                                                  return "Result ready in 0.1s";

                                                }

tools.generator-cursor-css.preview

Hover over here

tools.generator-cursor-css.mode

tools.generator-cursor-css.selector

tools.generator-cursor-css.applyBody

tools.generator-cursor-css.builtin

tools.cursor-generator-css.url1

tools.cursor-generator-css.url2

tools.generator-cursor-css.hotspot

tools.cursor-generator-css.css

.cursor-demo {
  cursor: pointer;
}

tools.generator-cursor-css.note

Rate this tool:

Related tools

Other tools you may find useful

CSS Cursor Generator - Built-in and Custom Cursors with Hotspot

This tool generates acursorrule for any selector. You can choose a built-in cursor type or insert your own graphic file with an optional hotspot. You get clean CSS ready to paste and a live preview of the behavior.

Supported modes:builtinfor standard values such aspointer, text, moveandcustomfor cursor graphics with fallback to the selected cursor built-in. You define a hotspot byx and yin pixels.

How the CSS Cursor Generator works

The engine builds the final value of thecursorproperty based on the mode and parameters entered. In custom mode, you can provide one or two image addresses. The second address serves as an alternative version, e.g. for high-density screens. Finally, the list of cursor values containsfallback- the selected inline cursor. This way, if the browser fails to load the image, it will still show a reasonable indicator.

The tool also allows you to generate CSS for a specific selector or inject a rule on thebodyelement. This is useful when you want to change the cursor globally on the entire page or locally in a component.

Parameters and what they change

Mode

builtin- you select one of the standard values from the list.
custom- provide image addresses and optional hotspot and fallback.

Selector and scope

selector- the rule will be assigned to this class or identifier.
applyBody- if checked, generator will use selectorbody.

Inline cursor

You can selectpointer, text, move, grab, crosshair, zoom-in, not-allowedand others.
Special values for resize and scroll:ns-resize, ew-resize, all-scroll.

Custom cursor

url1, url2- path to the PNG file, SVG or CUR.
hotspot_x, hotspot_y- hotspot in pixels relative to the upper left corner of the graphic.
fallback- any built-in cursor from the list.

CSS syntax - what the

value looks like An example value in custom mode consists of one or two declarationsurl()with a hotspot, and finally a cursor built in as a fallback:

/* Cursor value with url, url2x and fallback */
cursor: url('cursor.png') 6 2, url('[email protected]') 12 4, pointer;

For builtin mode, the value is single:

/* Cursor value for the built-in cursor */
cursor: zoom-in;

Configuration examples and generated CSS

1. Cursor pointer for links in the side panel

/* Selector: .sidebar a */
.sidebar a {
  cursor:pointer;
}

2. Text cursor for editable area

/* Selector: .editor */
.editor {
  cursor:text;
}

3. Custom cursor with hotspot and fallback pointer

/* Selector: .cursor-brand */
.cursor-brand {
  cursor: url('https://cdn.example.com/cursors/brand.png') 4 4,
          url('https://cdn.example.com/cursors/[email protected]') 8 8,
          pointer;
}

4. Cursor grab and grabbing for dragging

/* Selector: .draggable