Gradient Generator

Colour

Build a linear, radial or conic CSS gradient from your own colour stops — copy the CSS, or download it as a PNG.

Runs in your browser•Zero cloud uploads / Files stay on device•No account required

Shape

Angle135°

Colour stops

0%
100%

Output

Write colours as

Extra blend stops per gap0

At 0 the CSS contains exactly the stops above. Raising it inserts extra stops blended in OKLab, which keeps saturated pairs — blue to yellow, say — from washing out through grey in the middle. It does change the stop list.

Export widthExport height

Optimized For Platforms

designbrandinstagram

How it works

1Pick a shape — linear, radial or conic — and set the angle.

2Add colour stops and drag them along the bar until the blend is right.

3If a pair washes out to grey in the middle, raise the blend stops: those extra stops are interpolated in OKLab, which keeps the midpoint colourful.

4Copy the CSS, or download the gradient as a PNG at whatever size you need.

Related tools in Colour

View all Colour tools →