A small collection of full-screen animated backgrounds. Every one is a single, self-contained HTML file — no dependencies, no build step, no JavaScript, no images. Just CSS and inline SVG.
Open index.html for the live gallery, or drop any examples/*.html straight into your project.
The previews below are stills. Each background is animated — open the file to see it move.
 01 · Dithered Clouds |
 02 · Amber CRT |
 03 · Aurora Mesh |
 04 · Blueprint Grid |
 05 · Synthwave Sunset |
 06 · Starfield Drift |
| # | Name | What it is | Techniques |
|---|---|---|---|
| 01 | Dithered Clouds | Two-tone Y2K sky, slowly drifting | SVG feTurbulence, posterize, bitmap dither |
| 02 | Amber CRT | Vintage phosphor terminal | gradients, scanlines, rolling bar, flicker |
| 03 | Aurora Mesh | Soft blurred gradient mesh | blurred radial-gradients, mix-blend-mode: screen |
| 04 | Blueprint Grid | Technical HUD grid + radar sweep | repeating-linear-gradient, parallax pan |
| 05 | Synthwave Sunset | 80s dusk with neon floor | 3D perspective/rotateX, CSS masks |
| 06 | Starfield Drift | Calm parallax stars | tiled gradient dots, parallax, twinkle |
- Open the example file you want.
- Copy everything inside
<body>plus its<style>block into your page. (Most are just two or three<div>s and some CSS.) - Make sure your background layer sits behind your content — these use
position: fixed; inset: 0and a lowz-index.
Each file starts with a comment block explaining the technique and the knobs — the few values to change for color, speed, and density.
- One file, zero dependencies. Each background is portable on its own. No npm, no CDN, no fonts.
- Pure CSS / SVG. No JavaScript, so they run anywhere — including inside an
<iframe>, an email preview, or a slide. - Cheap to render. Transforms and gradients, not per-pixel JS. They idle quietly in the background.
- Documented knobs. Every file tells you the handful of values worth tweaking.
CC0 1.0 Universal — public domain. Use them anywhere, for anything, no attribution required. No rights reserved.