Cursor Tutorials

custom cursor css website

Adding a custom cursor to a website with pure CSS

6 min read

Ship a pixel-art cursor on your homepage in three lines of CSS. No JS, no framework, every browser.

css cursor on button only

Custom cursor on buttons only (not the whole page)

4 min read

Scope your custom cursor to interactive elements so the rest of the site keeps the system pointer.

css cursor data uri svg

Inline SVG cursor as a data URI

5 min read

Eliminate the first-hover flash by inlining your SVG cursor as a data URI. Saves one HTTP request.

pixel cursor 4k retina

Pixel-perfect cursors on HiDPI / 4K displays

6 min read

Browsers smooth small cursor images. Ship a 2x version with shape-rendering or pre-rasterized PNG to keep pixels sharp.

css cursor fallback chain

Building a robust cursor fallback chain

4 min read

Stack SVG, PNG, and a system keyword in one rule so every browser gets the best cursor it can render.

tailwind custom cursor

Custom cursor with Tailwind CSS

5 min read

Extend tailwind.config.js to register a named custom cursor and use it as a utility class.

react custom cursor component

Reusable Cursor wrapper component in React

7 min read

A <CustomCursor src='...' hotspot={[8,4]}> wrapper that injects scoped cursor CSS for its children.

vue custom cursor directive

v-cursor directive for Vue 3

6 min read

Register a custom Vue directive so any element can accept a cursor: <button v-cursor='hand'>.

svelte custom cursor

Custom cursor in SvelteKit

5 min read

Use Svelte's built-in style: directive or scoped <style> blocks to apply a custom cursor per component.

nextjs custom cursor

Adding a global custom cursor in Next.js

5 min read

Drop your cursor PNG into /public, set body cursor in globals.css. Works in app router and pages router.

JavaScript Cursors

6 tutorials

javascript cursor trail effect

Building a JS cursor trail (sparkle, smoke, pixel)

10 min read

Spawn a small element on every mousemove and animate it out — the modern take on the early-2000s cursor trail.

canvas pixel cursor

Drawing a pixel-art cursor on a Canvas game

12 min read

Hide the OS cursor and draw your own at the mouse position inside requestAnimationFrame for full control.

javascript pointer lock fps

Implementing pointer lock for a browser FPS

9 min read

Use requestPointerLock() to capture the cursor for FPS-style aiming. Standard in browser game engines.

magnetic cursor effect

Magnetic cursor that snaps to buttons

11 min read

Modern marketing-site effect: a custom cursor that gets pulled toward CTAs as you approach them. Pure JS.

javascript replace cursor

Replacing the system cursor with a JS-driven element

7 min read

Hide cursor: none everywhere, then move a fixed-positioned div on every mousemove. The modern 'designer cursor.'

canvas multiplayer cursors

Two-cursor multiplayer pointer game with Canvas

15 min read

Render multiple cursors over a shared Canvas — useful for collaborative whiteboards or co-op pixel art.

Godot

3 tutorials

GODOT

godot 4 custom cursor

Setting a custom cursor in Godot 4

6 min read

Use Input.set_custom_mouse_cursor() with a 16x16 Texture2D for pixel-perfect cursors that scale with the viewport.

GODOT

godot animated cursor

Animated AnimatedTexture cursor in Godot 4

8 min read

Wrap your cursor frames in an AnimatedTexture and pass it to set_custom_mouse_cursor for a true frame-by-frame animated cursor.

GODOT

godot 3 custom cursor

Setting a custom cursor in Godot 3.5

6 min read

The Godot 3 API is nearly identical to 4 but lives on Input rather than InputServer. Tested on 3.5.

Unity

4 tutorials

unity custom cursor

Setting a custom cursor in Unity 2022/2023

7 min read

Cursor.SetCursor with a Texture2D and a Vector2 hotspot. Works in editor and in standalone builds.

unity cursor state hover

Per-state cursors in Unity (hover, click, drag)

9 min read

Swap the cursor on UI hover with EventSystem hooks for proper drag-and-drop game UI.

unity cursor lock fps

Locking and hiding the cursor for FPS games

5 min read

Cursor.lockState = CursorLockMode.Locked is the standard FPS pattern. Hide and unlock on pause.

unreal engine custom cursor

unity animated cursor

Animated cursor in Unity with Sprite frames

8 min read

Drive Cursor.SetCursor each frame from a sprite array to animate the pointer at any framerate.

Unreal

1 tutorial

UNREAL

Custom cursor in Unreal Engine 5

9 min read

Set the project's Default Cursor in Project Settings, or override with PlayerController->SetMouseCursorWidget at runtime.

Phaser

1 tutorial

PHASER

phaser custom cursor

Custom cursor in Phaser 3

6 min read

Phaser exposes game.canvas.style.cursor — same CSS cursor URL syntax as the rest of the web.

Three.js

1 tutorial

THREE

three.js custom cursor

Custom cursor for a Three.js scene

7 min read

Set the cursor on the renderer's canvas with CSS. For 3D 'in-world' cursors, raycast and place a sprite.

PixiJS

1 tutorial

PIXI

pixijs custom cursor

Custom cursor in PixiJS

6 min read

Use the .cursor property on any DisplayObject to apply a CSS cursor when hovered.

Defold

1 tutorial

DEFOLD

defold custom cursor

Custom cursor in Defold

5 min read

Defold ships a native cursor module. Set the cursor sprite per platform with sys.set_engine_arg.

LOVE2D

1 tutorial

LOVE2D

love2d custom cursor

Custom cursor in LOVE2D

5 min read

love.mouse.newCursor() reads an ImageData and turns it into a system cursor with a hotspot.

SDL2

1 tutorial

SDL

sdl2 custom cursor

Custom cursor in SDL2

7 min read

SDL_CreateColorCursor takes an SDL_Surface plus a hotspot. Pair with SDL_SetCursor to apply.

raylib

1 tutorial

RAYLIB

raylib custom cursor

Custom cursor in raylib

5 min read

raylib's HideCursor + manual DrawTextureV pattern is the simplest way to ship a custom cursor in a tiny C/C++ game.

PICO-8

1 tutorial

PICO8

pico-8 custom cursor

Custom cursor in PICO-8

4 min read

PICO-8 has no system cursor. Hide the default with poke(0x5f2d, 1) and draw your own with spr() at stat(32), stat(33).

Design (Aseprite, Figma, Piskel)

9 tutorials

aseprite cursor design

Designing a 16x16 cursor in Aseprite

11 min read

From silhouette to highlights in five passes. The standard pixel-art workflow for cursor design.

aseprite animated cursor

Animated cursor in Aseprite (busy spinner)

10 min read

Use Aseprite's frame timeline + onion skin to build a smooth 8-frame busy cursor that loops cleanly.

piskel cursor

Designing a cursor in free Piskel (browser)

8 min read

Piskel runs in the browser with full pixel-art tooling. Perfect for designing a quick cursor without installing anything.

sprite sheet cursor frames

Slicing a sprite sheet into cursor frames

6 min read

If you've drawn your animated cursor as a strip, ImageMagick or Aseprite can slice it for export to .ani / .cape / xcursor.

cursor readability test

Testing your cursor on three real backgrounds

4 min read

A pixel cursor that looks great on dark blue can vanish on a YouTube thumbnail. Test on three backgrounds before shipping.

cursor hotspot wrong

Tuning the hotspot for an off-by-one feel

5 min read

If your cursor 'feels weird,' the hotspot is almost certainly off by one or two pixels. Here's how to fix it.

figma cursor export

Designing cursors in Figma and exporting at 1x

6 min read

Figma is a vector tool, but with the right settings (no smoothing, integer scale) you can export pixel-perfect 16x16 cursors.

opengameart cursor remix

Re-skinning a CC0 OpenGameArt cursor pack

8 min read

CC0 packs let you re-color and ship as your own. Workflow for honest re-skins.

glow cursor svg

Adding a CSS-driven glow to an SVG cursor

6 min read

SVG cursors can include filter='url(#glow)' for a subtle bloom on retina displays — a synthwave staple.

File Conversion

3 tutorials

CONVERT

png to cur converter

Converting PNG to .cur and .ani on Windows

6 min read

RealWorld Cursor Editor is the de-facto Windows tool. Open your PNG, set the hotspot, save as .cur. Repeat for animation frames to make .ani.

CONVERT

mousecape custom cursor

Converting PNG cursors to a Mousecape .cape (macOS)

7 min read

Mousecape's .cape format is a plist of base64-encoded PNGs per cursor type and per scale.

CONVERT

xcursorgen linux cursor

Building an XCursor theme with xcursorgen (Linux)

8 min read

Build a folder of PNGs into an XCursor theme using xcursorgen and a config file mapping each cursor symlink.

Platform Installs

5 tutorials

replace windows hand cursor

Replacing only the Windows hand cursor (link select)

6 min read

Windows lets you replace any individual cursor. Useful for swapping just the link cursor without changing the pointer.

hyprland cursor theme

Setting an XCursor theme in Hyprland

7 min read

Hyprland reads HYPRCURSOR_THEME at startup; older XCursor themes work via XCURSOR_THEME.

gnome 46 cursor theme

Switching cursor theme in GNOME 46

4 min read

GNOME no longer surfaces cursor selection in Settings. Use GNOME Tweaks or gsettings.

kde plasma cursor theme

Switching cursor theme in KDE Plasma 6

4 min read

Plasma's cursor settings live in System Settings -> Colors & Themes -> Cursors.

cursor pack folder structure

chromebook custom cursor

Custom cursor on ChromeOS (the limited story)

5 min read

ChromeOS does not support custom system cursors. Browser-only is your only option; here's how.

Licensing

2 tutorials

LICENSE

cursor attribution line

Writing a proper cursor pack attribution line

4 min read

For CC BY packs, your attribution should name the author, link the source, and state the license. Here's a copy-paste template.

LICENSE

submit cursor pack

Submitting your pack to CursorCraft

3 min read

Use the contact page to submit a pack. Include all files, license, and a one-paragraph description.

Packaging

3 tutorials

PACKAGE

The standard cursor pack folder structure

5 min read

How to organize a multi-platform cursor pack so installers find every file.

PACKAGE

windows install.inf cursor

Writing a Windows install.inf for a cursor scheme

7 min read

The install.inf is the file that registers a cursor scheme. It's plain text; here's the canonical template.

PACKAGE

github actions cursor pack

Auto-building cursor packs in GitHub Actions

10 min read

Trigger a build on every push that runs xcursorgen for Linux and packages all platforms into release artifacts.

Web / Browser

4 tutorials

detect cursor support

Detecting browser cursor support in JavaScript

5 min read

Use CSS.supports('cursor', 'url(x.png) 0 0, auto') to confirm a browser will accept your URL syntax before applying it.

custom cursor accessibility

Accessibility considerations for custom cursors

7 min read

Custom cursors interact badly with high-contrast OS themes, pointer-magnification tools, and reduced motion. Here's the responsible default.

cursor dark mode swap

Swapping the cursor for dark mode automatically

5 min read

Use prefers-color-scheme to ship a light-mode and dark-mode variant of your custom cursor — same shape, different palette.