General
Let the browser decide, show the plain arrow, or show nothing at all.
- auto
- default
- none
The custom cursor studio
Every CSS cursor, plus the one you make
Look up 36 CSS cursor keywords, or make your own and export a PNG with its CSS, a .cur or an .ani. Free, no sign-up.
-
pointer -
grab -
text -
crosshair -
not-allowed -
zoom-in
CSS reference
All 36 cursor keywords, live
Hover any keyword to see the cursor your system draws for it. Each page says when to use it, when not to, which Windows and Mac cursor it becomes, and gives you a snippet to copy.
Links and status
Clickable things, help, context menus, and waiting.
- context-menu
- help
- pointer
- progress
- wait
Selection
Selecting text, table cells, and exact points.
- cell
- crosshair
- text
- vertical-text
Drag and drop
Grabbing, moving, copying, and refusing a drop.
- alias
- copy
- move
- no-drop
- not-allowed
- grab
- grabbing
Resize and scroll
Edges, corners, columns, rows, and panning.
- all-scroll
- col-resize
- row-resize
- n-resize
- e-resize
- s-resize
- w-resize
- ne-resize
- nw-resize
- se-resize
- sw-resize
- ew-resize
- ns-resize
- nesw-resize
- nwse-resize
Zoom
Zooming in and zooming out.
- zoom-in
- zoom-out
Custom images
Your own image, with a hotspot and a fallback keyword.
- url()
Cursor maker
Draw it, set the hotspot, export
Upload a PNG or SVG, or draw on the pixel grid. Set the hotspot, try the cursor on a sample page, then download a PNG with its CSS line, a Windows .cur, or an animated .ani.
- 01
Draw it or bring it
Draw on a pixel grid, or start from a PNG or SVG you already have, such as your logo.
- 02
Place the hotspot
Click the one pixel that does the clicking. Get it wrong and every click lands a little off.
- 03
Take it to the web or the desktop
Save a PNG with its ready
cursor: url()line, a Windows .cur file, or an animated .ani.
- PNG + CSS
- .cur
- .ani
- SVG
- web bundle
Draw a cursor or start from your own image, place the hotspot, and save it for the web or for Windows.
Start a cursorConverters
PNG, CUR, ICO and ANI
Turn a PNG into a .cur, get the PNG back out of a .cur, change an .ico into a cursor, or put frames together into an animated .ani. Your file is read in your browser tab.
PNG to CUR
Turn a PNG into a Windows cursor file, with the hotspot exactly where you click.
CUR to PNG
Open a .cur file and save every size inside it as a PNG.
ICO to CUR
Give an icon a hotspot and save it as a cursor Windows will accept.
Frames to ANI
Put a set of frames together as an animated .ani cursor, with a speed for each frame.
Cursor packs
Free sets, drawn by us
Original cursor sets you can use for anything under CC0. Each pack comes as .cur and .ani files with a Windows installer, plus PNG files and CSS for the web.
Cursor effects
Copy-paste effects that behave
A dot and ring follower, a trail, a spotlight, a magnetic button and more, with live demos. Each one is plain JavaScript, leaves touch screens alone and respects reduced motion.
Cursor spotlight effect: a glow that follows the mouse
A soft glow follows the pointer across a dark panel, as if you were holding a torch over it. The text sits above the light, so it stays readable.
Cursor trail effect: a fading line that follows the mouse
A soft line follows the pointer and fades within half a second. It draws on a single full-screen canvas, so it stays smooth and never gets in the way of a click.
Custom image cursor in CSS: SVG arrow, hotspot, fallback
Two inline SVG cursors, an arrow and a dot for links, set with cursor: url() and a keyword fallback. Text fields keep their normal I-beam. An optional script adds a small ripple where you click.
Dot and ring cursor follower: copy-paste CSS and JS
A small dot sits exactly on the pointer while a thin ring follows a beat behind and grows over links. The system cursor stays visible, so nobody loses their place.
Hide the native cursor safely: a scoped CSS and JS pattern
This pattern hides the system cursor only inside the sections you choose, draws a dot exactly where the pointer is, and hands the real cursor back wherever hiding it would hurt.
Magnetic button: a button that leans toward the cursor
As the pointer comes near, the button drifts toward it and its label drifts a little further. When the pointer leaves, it settles back into place.
Guides
Install, build and fix cursors
Install cursors on Windows 11 and macOS, add them in Webflow, Framer, Wix or Squarespace, and understand .cur, .ani and the size limits that make custom cursors vanish.
Animated cursors explained: .ani files, frames and jiffies
An .ani file is a stack of ordinary cursor images plus a little timing information. Once you know how frames, steps and jiffies fit together, you can make animated cursors that play at the speed you meant.
Custom cursor size limits in Chrome, Firefox and Safari
A custom cursor that works in the middle of the page and turns back into the arrow near the top is not a bug in your CSS. Browsers limit cursor images on purpose. Here are the exact rules and how to design inside them.
.cur vs .ico vs .png: which cursor file format to use
Five file types turn up around cursors, and they are not interchangeable. This is what each one stores, where it works, and what to export for the web, Windows and Mac.
Custom cursors on macOS: what works and what does not
Unlike Windows, macOS has no built-in way to install a cursor pack. You can still make the pointer bigger and recolour it, replace it completely with a community tool, or give your website its own cursor with CSS.
How to make a custom cursor from your logo
A logo makes a memorable cursor, but only if it still reads at 32 pixels and people can tell where it clicks. These steps take a brand mark from your design file to a cursor that works on the web and on Windows.
Install a custom cursor on Windows 11, step by step
Windows 11 still uses the classic Mouse Properties window for cursors. Here is how to install a pack in a minute, set cursors one by one, keep them sharp at any size, and get the default back.