FIRST CH TOOLS / DESIGN / 44 CSS GRADIENT GENERATOR

CSS Gradient Generator

Build linear, radial and conic gradients by dragging the stops, and copy the CSS. Choose OKLCH interpolation (in oklch) and the middle of two saturated colours stops turning grey. An sRGB fallback line for older browsers comes out at the same time.

Pick a type and a direction

Type Repeat (repeating-)

Angle deg

Interpolation Hue path

Also output an sRGB fallback Fallback detail

Colour stops (drag a handle, double-click the bar to add)

Colours can be written as #c8501f, rgb(200 80 31 / 0.5), hsl(14 73% 45%), oklch(56% 0.16 40) or a CSS name such as tomato. Handles also move with the arrow keys (Shift for 10% steps, Delete to remove).

Preview

Colour stops

135deg

Direction / centre

oklch

Interpolation space

CSS length (characters)

Generated CSS

Checks

Converting one colour (HEX ⇄ RGB ⇄ HSL ⇄ OKLCH, alpha flattening) is in the Color Converter. Legibility of text over a background is in the Contrast Checker, and sizes that follow the viewport are in the CSS clamp() Calculator.

The syntax, and the traps

0deg points up, and angles run clockwise

The angle in linear-gradient is the direction the gradient ends towards: 0deg is up, 90deg is right, 180deg is down. That is not the convention of maths, nor of the old -webkit-linear-gradient (where 0deg pointed right and angles ran anticlockwise), so old code pasted in unchanged points the wrong way. Keywords work too, and to right equals 90deg.

Why sRGB interpolation goes grey in the middle

By default the browser mixes the R, G and B numbers in a straight line. Those numbers do not match how we see, so mixing two colours far apart in hue — blue and yellow, say — drops the saturation half-way and leaves a dull grey band. in oklch interpolates in a perceptually even space instead, so lightness and colourfulness hold up across the middle.

oklch versus oklab

Both sit on OKLab, but oklch is the polar form (lightness, chroma, hue), so a pair of colours travels around the hue circle. oklab keeps the rectangular coordinates and moves along the straight line between the two colours, with no hue rotation. For distant pairs such as red to blue the difference is obvious, so try both.

Which way round the hue goes

In polar spaces (oklch, hsl) you choose the direction around the wheel. The default shorter hue takes the near side; longer hue takes the far side and sweeps the whole wheel, which is what makes a rainbow. Put the same colour at 0% and 100% of a conic gradient with longer hue and you have drawn the colour wheel itself.

Why the fallback is a second line

Colour interpolation methods need Chrome 111, Safari 16.2 or Firefox 113 (2023). Older browsers discard the whole declaration as invalid, so write the property twice: the sRGB version first, the version with the interpolation method second. Browsers that understand it overwrite the earlier line; the rest keep it. The sRGB version here is the same curve with intermediate colours baked in as ordinary stops.

Hard stops make stripes and pie charts

Two stops at the same position switch colour instead of blending (a hard stop). Combine that with repeating-linear-gradient for stripes, or with conic-gradient for a pie chart. A repeating gradient treats the last stop as the end of one cycle, so move it in from 100% for the repeat to be visible.

Fading to transparent

The keyword transparent means rgb(0 0 0 / 0) — transparent black. Current browsers premultiply alpha before interpolating so it no longer darkens the fade, but older engines sank to grey in the middle. Writing the same colour with an alpha of 0 (rgb(255 255 255 / 0) when fading out white) behaves the same everywhere.

Using it as a background

A gradient is an image, so it belongs in background-image (or the background shorthand). To put it on text, pair it with background-clip: text and color: transparent; for a border, use border-image or a pseudo-element underneath. Gradients themselves cannot be transitioned, so animate background-position or opacity, or drive the values from a custom property registered with @property.

Check legibility separately

When text sits on a gradient, measure the contrast at the worst spot — where the background comes closest in lightness to the text. Whether it passes WCAG is what the Contrast Checker answers, and single-colour conversions are in the Color Converter.

An OKLCH gradient against the sRGB default, measured

The reason to reach for an OKLCH gradient is the middle. CSS interpolates sRGB numbers unless told otherwise, and between two saturated colours far apart in hue that straight line passes close to neutral. Below is one blue-to-yellow gradient — #0066ff to #ffcc00, 90deg — built three ways by this page. The bars are the real declarations; the colour under each is what this tool bakes at the 50% mark when it writes the sRGB fallback.

Default (sRGB) — middle #809980

in oklab — middle #8ea7b7

in oklch — middle #00ca9d

Interpolation	Colour at 50%	Chroma there (OKLCH C)
Default, i.e. in srgb	#809980	0.046
in oklab	#8ea7b7	0.036
in oklch	#00ca9d	0.149
The two ends, for comparison	#0066ff / #ffcc00	0.241 / 0.177

That is the grey band, as a number. The ends carry a chroma of 0.241 and 0.177, and sRGB interpolation drops the halfway point to 0.046 — about a fifth of what the ends have. in oklch holds 0.149 there, so the gradient stays a colour all the way across instead of sagging through grey. (Chroma values read from the Color Converter; the 50% colours are this page's own fallback output, so you can reproduce every row by switching the Interpolation select above.)

in oklab is not the fix for this pair — and that is not a bug. OKLab keeps rectangular coordinates, so it travels the straight line between the two colours; blue and yellow sit on roughly opposite sides of the neutral axis, so that line runs through it and the middle comes out flatter than sRGB. OKLCH is the polar form, so the same pair travels around the hue circle — blue, teal, green, yellow — which is where the colourfulness in the middle comes from. Choose oklab when you specifically do not want that hue detour (two tints of one hue, or a fade to white or black), and oklch the rest of the time.

Linear, radial and conic gradients in OKLCH

The interpolation method goes in the first argument, next to the angle or the position, not with the colour stops. These are the three forms this generator writes:

/* linear */
background-image: linear-gradient(90deg in oklch, #0066ff 0%, #ffcc00 100%);

/* radial */
background-image: radial-gradient(ellipse farthest-corner at 50% 50% in oklch, #0066ff 0%, #ffcc00 100%);

/* conic */
background-image: conic-gradient(from 0deg at 50% 50% in oklch, #0066ff 0%, #ffcc00 100%);

/* the colour wheel: one colour at both ends, the long way round the hue circle */
background-image: linear-gradient(90deg in oklch longer hue, #c8501f 0%, #c8501f 100%);

A browser that cannot read in oklch throws the whole declaration away, so ship the sRGB line first and the OKLCH line second — the tool above writes both, with the intermediate colours baked in along the same curve. The browser versions this needs are under How it works.

How to Use

Pick a type and directionChoose linear, radial or conic, then set the angle (or the centre). The arrow buttons drop in 0deg through 315deg.
Place the coloursDrag a handle along the bar to move a stop, and use the swatch or the text field in its row to change the colour. Double-click the bar to add a stop where you clicked.
Copy and paste"Copy value" gives you the bare linear-gradient(…); "Copy declaration" gives all three lines including the fallback.

About This Tool

A gradient is nothing more than which colour sits where. This page lets you lay out those pairs — a position from 0 to 100% and a colour — and assembles them into linear-gradient, radial-gradient or conic-gradient CSS. Handles drag, double-clicking adds, and buttons distribute or reverse the stops, so the shape is decided without typing numbers. The angle comes from a slider or from the eight direction buttons.

OKLCH interpolation is the default here. CSS mixes sRGB numbers unless you say otherwise, which leaves a grey middle between two saturated colours of different hue. Adding in oklch interpolates in a perceptually even space, holding lightness and colourfulness steady all the way across. You can also choose which way round the hue circle to travel (shorter or longer) — a conic gradient with longer hue draws the colour wheel.

The fallback for older browsers comes out with it. A browser that cannot read the interpolation method throws the whole declaration away, so the tool writes a first line in which intermediate colours are baked in as ordinary sRGB stops along the same curve, followed by the real in oklch version. The baking follows CSS Color 4 colour interpolation: components are premultiplied by alpha before mixing and the hue is corrected for the chosen direction, so semi-transparent stops stay clean.

It pairs with /color/ for single colours. HEX ⇄ RGB ⇄ HSL ⇄ OKLCH conversion, alpha flattening and tone palettes live in the Color Converter & Alpha Calculator; this page arranges the colours you settled on there into a gradient. Everything runs in the browser and nothing is uploaded. Directly callable via URL parameters: /en/gradient/?type=linear&angle=135&space=oklch&stops=%23c8501f@0|%2323282e@100