Skip to content

Free · runs in your browser

Gradient generator

Open in the editor: Soft pink and yellow glows blending into pale blue on cream, a gradient made in the gradient generator. Pastel aura Save

Pick a style and five colours, and the gradient renders live. Change the blend, the grain and the light, then save a picture, a loop or CSS.

Open the gradient editor

It opens on Pastel aura. Every picture below opens on its own settings.

Real output

Each opens on its own settings

Gradients

How the colours blend

A palette here is five colours, and the field blends them in OKLab, a colour space built so that halfway between two colours looks halfway. A blue-to-orange gradient stays clean in the middle instead of turning grey.

Start from one of sixteen palettes, build one from a single colour with a harmony (analogous, complementary, triad or mono), take the colours of a photo you drop in, or paste your brand's hex codes or a Coolors link.

Every look also exports as CSS. The tool fits real gradient code to the picture and tells you how close it comes, so a smooth gradient costs no image download. Detailed looks such as Oil slick come out rough, and the tool says to save those as a picture. Every style saves as a PNG, JPEG or WebP, up to 6000 pixels on the long edge on a computer, or as a video loop.

Every picture comes from a seed, so a share link reopens the same gradient. It all runs in your browser tab, with no account.

More ways in

Start somewhere else