CSS gradient generator · an Atelier studio

ChromaFlow

Paint rich mesh-style gradients with perceptual OKLCH colour.

ChromaFlow lets you paint a background instead of describing it. Drop colour emitters on a canvas, shape how far each one reaches, and export gradients that blend in OKLCH, so colours stay vivid instead of turning muddy grey.

Open ChromaFlow See features

Free & open source
Runs in your browser
Exports plain CSS

atelier/css-gradient-generator

ChromaFlow interface: CSS gradient generator

Features

What you can do in ChromaFlow.

Spatial colour emitters

Place colour points anywhere on the canvas. Each one radiates its own field instead of sitting on a straight gradient line.

Shape every field

Radial circles, boxes, polygons, directional beams, hollow rings and conic sectors, each with its own reach, core and angle.

Perceptual OKLCH blending

Colours mix in OKLCH with a chroma bridge, so blends stay vivid where sRGB turns grey. Hold a button to compare the two.

Falloff curves

Decide how each colour fades with stepped or Bézier curves, previewed on a live centre-to-edge track.

Harmonies & arrangements

Recolour every emitter with analogous, triadic, split-complement or golden-angle harmonies, and arrange them in orbits, grids, waves or spirals.

Grain, legibility & export

Add film grain, check text contrast on a glass card, then export CSS, custom properties, a Tailwind snippet or design tokens.

How it works

Four steps to production CSS.

Start from a preset
Pick a hero mesh, wallpaper or spotlight to remix.
Place & shape
Drag emitters, set their shape, reach and falloff.
Blend & finish
Choose colour harmonies, grain and blend modes.
Export
Copy CSS, custom properties, Tailwind or tokens.

The output

One element, many layered gradients

Every emitter becomes a gradient layer on a single element, with OKLCH colours and a solid fallback. No images, no canvas and no JavaScript in your page.

Great for

Hero backgrounds
App wallpapers
Glass & card surfaces
Brand gradients

Example export

.orchestrated-gradient {
  background-color: #0a0d1d;
  background-image:
    radial-gradient(78% 64% at 22% 28%, oklch(62% 0.24 285), oklch(62% 0.24 285 / 0) 100%),
    radial-gradient(74% 70% at 76% 26%, oklch(66% 0.25 5), oklch(66% 0.25 5 / 0) 100%),
    radial-gradient(76% 72% at 28% 74%, oklch(78% 0.15 210), oklch(78% 0.15 210 / 0) 100%);
}

Ready to try ChromaFlow?

It opens instantly in your browser. Nothing to install, nothing to sign up for.

Open ChromaFlow