FX Lab · 100+ cursors

Animated cursors that match your style

A curated set of 100+ custom cursors — magnetic, trail, particle, glass, HUD and more — hand-picked from 200 for craft and usefulness, plus a set of themed scrollbars. Pick a theme and everything re-colours to fit. Hover a tile to drive it.

StyleGlassmorphismcursor: Glass Lens

Scrollbars

8 styles — recoloured by the theme above, scroll each card, copy CSS

All driven by --accent — paste the CSS into any project and replace the variable with your color.

Minimal

Line 1 — thumb uses var(--accent)

Line 2 — thumb uses var(--accent)

Line 3 — thumb uses var(--accent)

Line 4 — thumb uses var(--accent)

Line 5 — thumb uses var(--accent)

Line 6 — thumb uses var(--accent)

Line 7 — thumb uses var(--accent)

Line 8 — thumb uses var(--accent)

Line 9 — thumb uses var(--accent)

Line 10 — thumb uses var(--accent)

Glass

Line 1 — thumb uses var(--accent)

Line 2 — thumb uses var(--accent)

Line 3 — thumb uses var(--accent)

Line 4 — thumb uses var(--accent)

Line 5 — thumb uses var(--accent)

Line 6 — thumb uses var(--accent)

Line 7 — thumb uses var(--accent)

Line 8 — thumb uses var(--accent)

Line 9 — thumb uses var(--accent)

Line 10 — thumb uses var(--accent)

Neon

Line 1 — thumb uses var(--accent)

Line 2 — thumb uses var(--accent)

Line 3 — thumb uses var(--accent)

Line 4 — thumb uses var(--accent)

Line 5 — thumb uses var(--accent)

Line 6 — thumb uses var(--accent)

Line 7 — thumb uses var(--accent)

Line 8 — thumb uses var(--accent)

Line 9 — thumb uses var(--accent)

Line 10 — thumb uses var(--accent)

Chunky

Line 1 — thumb uses var(--accent)

Line 2 — thumb uses var(--accent)

Line 3 — thumb uses var(--accent)

Line 4 — thumb uses var(--accent)

Line 5 — thumb uses var(--accent)

Line 6 — thumb uses var(--accent)

Line 7 — thumb uses var(--accent)

Line 8 — thumb uses var(--accent)

Line 9 — thumb uses var(--accent)

Line 10 — thumb uses var(--accent)

Rail

Line 1 — thumb uses var(--accent)

Line 2 — thumb uses var(--accent)

Line 3 — thumb uses var(--accent)

Line 4 — thumb uses var(--accent)

Line 5 — thumb uses var(--accent)

Line 6 — thumb uses var(--accent)

Line 7 — thumb uses var(--accent)

Line 8 — thumb uses var(--accent)

Line 9 — thumb uses var(--accent)

Line 10 — thumb uses var(--accent)

Gradient

Line 1 — thumb uses var(--accent)

Line 2 — thumb uses var(--accent)

Line 3 — thumb uses var(--accent)

Line 4 — thumb uses var(--accent)

Line 5 — thumb uses var(--accent)

Line 6 — thumb uses var(--accent)

Line 7 — thumb uses var(--accent)

Line 8 — thumb uses var(--accent)

Line 9 — thumb uses var(--accent)

Line 10 — thumb uses var(--accent)

Pill

Line 1 — thumb uses var(--accent)

Line 2 — thumb uses var(--accent)

Line 3 — thumb uses var(--accent)

Line 4 — thumb uses var(--accent)

Line 5 — thumb uses var(--accent)

Line 6 — thumb uses var(--accent)

Line 7 — thumb uses var(--accent)

Line 8 — thumb uses var(--accent)

Line 9 — thumb uses var(--accent)

Line 10 — thumb uses var(--accent)

Inset

Line 1 — thumb uses var(--accent)

Line 2 — thumb uses var(--accent)

Line 3 — thumb uses var(--accent)

Line 4 — thumb uses var(--accent)

Line 5 — thumb uses var(--accent)

Line 6 — thumb uses var(--accent)

Line 7 — thumb uses var(--accent)

Line 8 — thumb uses var(--accent)

Line 9 — thumb uses var(--accent)

Line 10 — thumb uses var(--accent)

Cursors

10 premium effects — colors adapt to the style above

Hover any tile to take control. The active style's signature cursor is highlighted.

Magnetic Pulse

Pull field — attracts everything near it

MinimalismCorporateArt Deco

Dot + Ring

Precision double-ring, razor clean

Flat DesignSwissBauhaus

GLASSMOR

Glass Lens

Frosted glass orb with depth

GlassmorphismLuxuryFrosted

Spring Overshoot

Physics spring — overshoot then settle

ClaymorphismPlayfulPastel

Liquid Blob

Organic fluid that morphs on move

Motion MorphismOrganicAurora

Mercury Drop

Chrome liquid — drips and reforms

NeumorphismY2KSkeuomorphism

Bracket Frame

HUD targeting frame with snap

CyberpunkNeobrutalismTerminal

Progress Ring

Rotating progress arc, always in motion

MaterialBentoSaaS

Water Ripple

Concentric ripples fade outward

Retro FuturismEcoHand-drawn

Aurora Glow

Nebula softness with chromatic corona

HolographicDark LuxeVaporwave

Loading cursor engine…

How to add a custom cursor

A custom cursor is a small element that follows the pointer while you hide the native one with cursor: none. Empire UI cursors are themeable through three CSS variables — --accent, --accent-2, --accent-3 — so the same cursor adapts to any of the 40 styles instantly.