Free assets

Animated backgrounds, ready to paste.

Sixteen animated backgrounds built from nothing but CSS gradients, CSS keyframes, SVG filters and a little canvas. No images, no video, no GIFs, no libraries and no build step — every tile below is the effect itself, running live, and every one has a copy button that puts runnable source on your clipboard.

Free under MIT: use them in client work, in a product or in a fork. No attribution required, no account, no licence key, and nothing to install.

16 backgrounds4 techniques0 dependencies0 image requests

Browse the backgrounds Get the prompts that build them

The collection

Sixteen techniques, sixteen files you do not need.

16 of 16 backgrounds

Aurora Drift

Gradients

Three blurred radial gradients drift on 19s, 26s and 15s paths and screen together, so the blend never repeats exactly.

Mesh Gradient

Gradients

Five colour blobs wander a near-black field at five different speeds; screen blending makes the overlaps bloom instead of muddying.

Conic Sweep

Gradients

One conic-gradient disc turns behind a vignette on a 22s linear loop — the cheapest continuous colour rotation in CSS.

Noise Grain

SVG

An SVG feTurbulence field re-seeded five times a second over a flat colour: real film grain, zero image requests.

Line Grid

Patterns

Two hairline gradients 32px apart scroll diagonally under a radial mask, so the grid fades out instead of ending at an edge.

Dot Matrix

Patterns

A radial-gradient dot lattice pulses its mask from 70% to 132% — the dots hold still while the field opens and closes.

Liquid Waves

SVG

Two SVG paths morph between hand-matched cubic curves at 9s and 6.3s so the crests cross rather than locking in step.

Chromatic Bands

Gradients

Four-colour bands on a 56px period slide by exactly one period while a hue-rotate filter walks the stack through 360°.

Spotlight Follow

Patterns

A radial spotlight pinned to two custom properties the pointer updates — the gradient is never re-declared, only its centre moves.

Starfield

Canvas

220 stars across three depths drift and wrap on one canvas; depth sets radius, velocity, colour temperature and twinkle rate.

Plasma Field

Canvas

An 88×55 canvas computes a four-term sine plasma per pixel, then CSS scales and blurs it: 4,840 pixels of maths, not a full-size repaint.

Ripple Rings

Patterns

Three rings scale from 0.25 to 2.45 and fade out, staggered by a third of the cycle each with negative delays so they start mid-flight.

Diagonal Marquee

Patterns

A repeating conic stripe pattern 110px wide translates diagonally under a vignette — a striped field that reads as a slow diagonal drift.

Soft Bloom

Gradients

One large blurred orb breathes between 0.82 and 1.18 scale on a dark field; the whole effect is a single element and one keyframe pair.

Caustics

SVG

Two turbulence-displaced gradients rotate in opposite directions at 26s and 19s and screen together, the way light folds across a pool floor.

Vaporwave Horizon

Patterns

A perspective-rotated grid scrolls toward a banded sun disc behind a glow horizon: one rotateX, two repeating gradients, one mask.

How to use

Three steps from this page to your own.

Copy the CSS. Hit Copy CSS on any tile. You get a comment header naming the effect, then every rule and keyframe it needs — no variables from this site, no imports, no build step. Paste it into your stylesheet.
Add the wrapper. Hit Copy HTML for the matching markup. It is always a single <div class="fx-…"> with one to five empty children; the canvas and spotlight effects ship their own short boot script in the same paste.
Keep the reduced-motion block. Every effect is decorative, so the prefers-reduced-motion rule at the end of each paste costs you nothing and keeps the page usable for people who ask for less motion.

<!-- 1. one wrapper element with empty children -->
<div class="fx-aurora">
  <i></i><i></i><i></i>
</div>

/* 2. the CSS you copied — self-contained, no imports, no site variables */
.fx-aurora { position: relative; overflow: hidden; background: #07080c; }
.fx-aurora i { position: absolute; inset: -35%; filter: blur(20px); mix-blend-mode: screen; }
.fx-aurora i:nth-child(1) { background: radial-gradient(closest-side, rgba(212,255,79,.5), transparent 72%);
  animation: fx-aurora-a 19s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes fx-aurora-a { from { transform: translate3d(-14%,-8%,0) scale(1); }
                         to   { transform: translate3d(12%,10%,0) scale(1.28); } }

/* 3. keep your content above the effect and let the wrapper fill its box */
.hero { position: relative; min-height: 70vh; }
.hero > .fx-aurora { position: absolute; inset: 0; }
.hero > h1 { position: relative; z-index: 1; }

/* 4. every effect here is decorative — switch it off when motion is not wanted */
@media (prefers-reduced-motion: reduce) { .fx-aurora i { animation: none; } }

Two rules worth keeping: give the wrapper a box (or absolutely position it behind your content) and put your text in a positioned child so it sits above the effect layers. Off-screen tiles on this page are paused by an IntersectionObserver, canvas loops queue behind a hard cap of six, and the whole gallery is MIT licensed — client work, products and forks included.