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.

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