Mesh Gradient Drift
Free · CSS only
15 CSS backgrounds · 252 animated sections
Backgrounds that move on their own
Plain HTML and CSS, no libraries, no cursor tricks, plus live WebGL scenes for the pages that deserve more. Pick one, copy the code or hand the prompt to your coding agent.
ShipyardSolo developers
StorylineFrontend teams
FrameloopUI/UX designers
EchoAI engineers
McpforgeAI platform teams
RunwayhqFounders and CEOs
ComplyhubBusiness teams
LedgerlyBanking
Installable backgrounds
Every one is a single file you install with one command. CSS only, themed by your colour tokens, and they stop moving for people who ask for less motion.
15 of 15
Aurora drift
Three blurred colour fields drift and turn slowly.
Grid scan
A fine grid with a soft light band that sweeps down.
Dot wave
A dot field lit by a travelling diagonal wave.
Conic halo
A blurred conic ring turns behind a breathing core.
Light beams
Slanted beams of light slide and fade in turn.
Orbit rings
Dashed rings turn in opposite directions with a moving dot.
Tide lines
Three layers of water slide at different speeds.
Mesh gradient
Colour stops glide across the surface (registered properties).
Ripples
Rings expand from the centre and fade, one after another.
Flow lines
Dashed curves stream across the box at different speeds.
Checker drift
A checkerboard slides diagonally and fades to the edges.
Stage lights
Two soft cones sweep slowly from the top edge.
Starfield
Layers of stars twinkle and drift upward.
Signal network
Nodes pulse while signals travel along the links.
Binary rain
Columns of ones and zeros fall and fade.
How
Use one in three steps
- 01
Pick
Open a card and watch it for a few seconds. Each loop is slow on purpose.
- 02
Copy
Copy code gives HTML and CSS. Copy prompt gives a short brief for your coding agent if you would rather it fit your stack.
- 03
Place
Put the snippet inside a relatively positioned section behind your content, and set the four colour variables.
FAQ