Every cover here is CSS

Every entry on this site has a small moving picture beside it. None of them is an image. Each is a single <div> with two class names, a recipe and a palette, and the browser paints the rest. Hover over one on the homepage and it holds still.

Ten palettes, named in Hindi

Each palette is four colours, --c1 to --c4. They follow one naming rule: a single Hindi word for something in the world that already has those colours. A pigment, a spice, a material, a sky, a time of day.

godhuli's four colours aren't mine. They're the "Iridescent cloud" preset from the Gradient Builder (Moon White, Peach Pink, Lapis and Ancient Purple), which is where all of this started.

Eight recipes

A palette says which colours. A recipe says what to do with them.

• Mesh. Three soft radial-gradient fields over a base colour, blurred. The oldest recipe here, and the one the others grew from.
• Aurora. Two elliptical bands of light, cut into rays by two repeating stripe patterns multiplied together with mask-composite: intersect, so the rays vary in brightness like real curtains. Then blurred, and blended with screen.
• Bars. Six linear-gradient layers on one element, each with its own background-size, rising left to right.
• Prism. One radial glow, masked into columns of alternating brightness.
• Forms. One circle gradient with a firm edge and a soft halo, set low so only the arc shows.
• Sky. A vertical wash with three white radial clouds.
• Watercolour. A gradient masked by fractal noise: an SVG feTurbulence filter embedded as a data: image, turned into soft blotches by a colour matrix. It's a still picture, so it costs nothing to keep on screen.
• Swirl. A conic-gradient, blurred until the seams disappear.

The tricks they share

The recipe draws on an oversized ::before layer, not on the cover itself. Here is the sky, whole:

.cover::before { content: ""; position: absolute; inset: -15%; }
.c-sky::before { inset: -15% -35%; animation: cover-clouds 10s ease-in-out infinite alternate; }
@keyframes cover-clouds { from { transform: translateX(-18%); } to { transform: translateX(18%); } }

• Motion is transform only. Moving a layer, rather than redrawing a gradient, lets the compositor run the animation without repainting. The layer is bigger than the cover so its edge never shows: a layer inset by m can travel about m ÷ (1 + 2*m*) of its own size.
• Sizes scale with the cover. Each cover is a size container (container-type: inline-size), so blurs and stripes are measured in cqi and look the same at 100 pixels wide as at 400.
• Colours mix in OKLab. radial-gradient(… in oklab, …) blends through the colours in between, not through grey.
• Grain is one tiny SVG. About 400 bytes of feTurbulence, laid over every cover with mix-blend-mode: overlay.
• Stillness when asked. Hover holds a cover still, and prefers-reduced-motion stops them all.
• No two alike. The build refuses two cards with the same recipe and palette, and says which two.

What didn't work

• The first aurora was a thin striped ribbon along the bottom. It took a much taller band, and two stripe patterns multiplied together, before it read as curtains.
• The first watercolour used the palette's darkest ink and came out as grey camouflage. Pigment wants the lighter colours.
• The first motion was too polite: a few percent over twenty seconds, lost under the blur. It now moves about twice as far in half the time.
• CSS can't warp colour the way a shader does, so Flow, the Gradient Builder's signature look, isn't here. Swirl is the nearest I got.

Credits

• The recipes are inspired by the Gradient Builder at feralui.dev, by Sarthak Navalekar. godhuli's colours are its "Iridescent cloud" preset.
• The CSS, the palettes and this page were made with Claude Opus 5.5 in Claude Code, directed by me.