CSS Gradient Generator

Make linear, radial and conic CSS gradients with OKLCH or OKLab blending and an sRGB fallback, then copy CSS, a Tailwind class or SVG, or download a PNG.

Runs entirely in your browser - your gradients aren't uploaded anywhere.

Colour stops

Click the bar to add a stop, drag a stop to move it. With a stop selected, arrow keys move it and Delete removes it.

ColourHexPosition (%)

Type

Angle (°)

Repeat

Presets

Blend colours in

The same stops, blended three ways. Classic sRGB can turn grey or muddy between distant colours; OKLab keeps the brightness even and OKLCH keeps the colour strong. Browsers that don't know OKLab or OKLCH get an sRGB fallback that looks the same.

Text on top

White text: 2.1:1; Too low
Black text: 4.2:1; AA large text only

The lowest contrast anywhere on the gradient. WCAG AA needs 4.5:1 for body text and 3:1 for large text.

Code

Format

background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);

Image size

Build a CSS gradient by eye and copy code that works everywhere. Pick linear, radial or conic, drag the colour stops, and choose how the colours blend: modern browsers can mix in OKLab or OKLCH, which avoids the grey dead zone of classic sRGB gradients, and the code comes with a matching sRGB fallback for older ones. You also see whether white or black text stays readable on top, and can export a Tailwind class, an SVG or a PNG of any size.

Frequently asked questions

What's the difference between sRGB, OKLab and OKLCH gradients?

They are different ways of working out the colours between two stops. Classic CSS gradients blend in sRGB, which can dip into grey (blue to yellow passes through a dull grey) or darken in the middle. OKLab is designed so equal steps look equal, so the blend stays evenly bright. OKLCH blends lightness, colour strength and hue separately, so it goes round the colour wheel and stays vivid - red to blue passes through purple instead of a dark mauve. Write “in oklab” or “in oklch” inside the gradient to use them.

Does the OKLCH gradient work in every browser?

Chrome and Edge 111+, Safari 16.2+ and Firefox 127+ understand “in oklch” and “in oklab”. For anything older the code has two “background” lines: the first is a plain sRGB gradient with extra stops in between, so it looks almost the same, and the second is the modern one. Browsers skip the line they don't understand, so everyone gets the best version they can draw.

How do I use it with Tailwind CSS?

Choose "Tailwind class" and copy it: it's an arbitrary value like bg-[linear-gradient(in_oklab_90deg,_#0077a3_0%,_#f59e0b_100%)], with spaces written as underscores as Tailwind expects. Paste it into class - no configuration needed.

Why can't I download a conic gradient as SVG?

SVG only has linear and radial gradients, and can't repeat a radial one the way CSS does. For those, download a PNG: it's drawn pixel by pixel with the same maths, so it matches the CSS exactly, at any size you choose.

Is the share link private?

The gradient is stored after the # in the link, a part browsers never send to a server, and the page is drawn entirely in your browser. Nothing is uploaded, and the gradient is only kept on this device so it's still there when you come back.