Studio Cursor

Tool

Cursor maker

Draw a cursor on a pixel grid or start from an image, set the hotspot, try it, and save a PNG with its CSS line, a Windows .cur, an animated .ani or a web bundle. Your files are read in this browser tab and are not sent to our server.

Draw here, or start from an image.

On the grid: arrow keys move (Shift moves 4), Space or Enter uses the tool, P E F I H pick a tool, G shows the grid. Ctrl+Z undoes and Ctrl+Y redoes.

When the maker scales your image

Start from an image

Or drop it here, or paste it. PNG, SVG, JPG, WebP, GIF (first frame), .cur or .ico. It is scaled to fit the canvas and replaces the frame you are editing; a .cur keeps its hotspot.

Colour

Painting with #15161a

An outline in a contrasting colour keeps a cursor visible on light and dark pages. It goes on the empty pixels around the drawing, corners included.

Hotspot

Where the cursor clicks

Click the pixel that does the clicking, here or on the grid with the Hotspot tool, or type it. Counted from the top-left corner; the first pixel is 0.

Try it

A link Some text to point at Light Dark
Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one.
Your cursor over a button, a link, text and a light and a dark tile.

Real size, 32 × 32

Frames

    The animation, playing

    Add frames to see the animation

    Save your cursor

    For the web

    CSS 
    cursor: url("my-cursor-32.png") 0 0, auto;

    The web bundle holds the PNG at this size and twice the size, plus cursor.css with a ready rule.

    For Windows

    Sizes in the file

    Windows picks the stored size closest to your pointer size, so more sizes stay sharp when the pointer is made bigger.

    Then follow installing a cursor on Windows 11.

    Before you start

    The hotspot is the part that clicks

    cursor: url(studio-arrow-32.png); Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one.
    This arrow's hotspot is 3 pixels in and 2 down, right at its tip.

    A cursor image is a small square picture, usually 32 × 32 pixels. Only one pixel of it does the clicking: the hotspot. For an arrow it is the tip, for a crosshair the centre, for a pointing hand the end of the finger.

    In CSS you give the hotspot as two numbers after the image, counted in pixels from the top-left corner. Leave them out and a PNG gets the top-left pixel, which is wrong for almost every cursor you will draw.

    CSS 
    .my-element {
  cursor: url("my-cursor.png") 3 2, auto;
}

    The keyword after the comma is required. It is what readers see if the image cannot load; see url() in the reference.

    What you can save

    One cursor, every way out

    For your website

    A PNG at the size browsers like, the matching cursor: url() line with the hotspot and a fallback keyword filled in, an SVG of the pixels, and a zip with the PNG at two sizes and a stylesheet.

    For Windows

    A .cur file with every size you tick and the hotspot stored inside each, ready to pick in Windows' mouse settings or to drop into a cursor scheme.

    Animated

    An .ani file from your frames, with a time for each frame, for busy and working cursors that move. Browsers do not play these; Windows does.

    Making a cursor from your logo walks through the whole job. Already have a file? Use a converter: PNG to CUR, CUR to PNG, ICO to CUR or Frames to ANI.