Create a CSS gradient

Choose the gradient type, drag the colour stops along the bar (or move them with the keyboard) and set the angle, shape or position. The preview uses the same CSS you copy.

Runs on your device

Loading tool…

How to use

Choose a type and angle.
Add, move and recolour stops.
Copy the CSS or download a PNG.

Worked example

linear-gradient(135deg, #0F766E 0%, #22C55E 100%).

Supported formats and limits

Output	CSS, PNG
Engine	Live CSS preview; optional OKLCH interpolation

Limitations

Interpolation in OKLCH requires a current browser; a fallback sRGB gradient is included in the CSS.

Questions

What does OKLCH interpolation change?

Colours are mixed in the OKLCH space, which usually avoids the grey middle of an sRGB blend between saturated colours. The copied CSS puts an sRGB fallback line first, so browsers without OKLCH support still show a close gradient.

Can I use the gradient as an image?

Yes. Download a PNG at the size you choose. It is drawn to match the browser's rendering of the same CSS.

Privacy

Runs on your device. Files and text are processed in this browser tab and are not uploaded.

See the privacy policy for how toolsdocks handles data.