Generar degradados CSS

CSS Gradient Generator builds a linear, radial or conic gradient and gives you the CSS. It interpolates in OKLab rather than sRGB, which is what stops a blue-to-yellow gradient turning grey in the middle, and it writes the result twice: once as a modern `in oklab` gradient and once as the same curve sampled into twelve plain stops, so older browsers get the same picture.

Solo local

La interfaz de esta herramienta está en inglés.

Type

Colour changes along a straight line at the angle you set. The one you want nine times out of ten.

Angle135°Interpolate in OKLabStops the middle of the gradient going grey. A twelve-stop sRGB fallback is emitted alongside it, so nothing older shows a different picture.

Stops (2)

0%
100%

CSS

background: linear-gradient(135deg, #00696f 0.0%, #2d726e 9.1%, #467b6c 18.2%, #5b846a 27.3%, #6f8c67 36.4%, #839563 45.5%, #969d5e 54.5%, #a9a557 63.6%, #bcad4f 72.7%, #cfb544 81.8%, #e2bd35 90.9%, #f5c518 100.0%);
background: linear-gradient(135deg in oklab, #00696f 0%, #f5c518 100%);

Two declarations, in that order. A browser that understands in oklab takes the second; anything older keeps the first and gets the same curve written out as plain stops.

The difference the space makes

The same stops, interpolated two ways. The gap is widest when the two colours sit on opposite sides of the wheel — try a blue and a yellow.

sRGB — the default

OKLab — in oklab

The 12-stop fallback

La guía de abajo solo está disponible en inglés.

How does CSS Gradient Generator work?

A gradient is a rule for producing every colour between two others, and the whole question is which space it does the producing in. The default is sRGB, and sRGB interpolation has one famous failure: the midpoint of two saturated colours from opposite sides of the wheel is not a colour between them, it is a desaturated sludge. Blue to yellow goes grey. Red to green goes brown. It is not a browser bug — it is what averaging three gamma-encoded channels does.

Why OKLab fixes it

OKLab is a perceptual space: its three axes are roughly lightness, green-to-red and blue-to-yellow, and distances in it match distances the eye reports. Averaging two colours there gives the colour a person would name as halfway between them, because that is what the space was constructed to do. CSS Color 4 lets you ask for it directly with in oklab, and every current browser supports it.

What the fallback is doing

in oklab arrived in browsers in 2023. Rather than leaving anything older with a visibly different gradient, this tool samples the OKLab curve at twelve points and writes them out as ordinary colour stops. The old browser then interpolates in sRGB — but only across short segments whose endpoints are already on the correct curve, and over a segment that short the two spaces do not visibly disagree. Both declarations are emitted, in that order, so a browser that understands the second uses it and one that does not keeps the first.

The other thing that goes wrong with gradients

Banding. A gradient across a wide area steps through a limited number of 8-bit values, and on a large flat surface you can see the steps as stripes. Nothing in the CSS can fix it, because the display is genuinely out of values; what fixes it is a small amount of noise over the top — a tiled PNG of a few hundred bytes at 3% opacity, or an SVG feTurbulence layer. If your hero gradient looks striped, that is what you are looking at, and no amount of extra colour stops will help.

And a word about using them at all

A gradient behind text is a contrast problem: the ratio changes across the element, so the corner that passes and the corner that fails are both real. If text has to sit on one, check the extremes rather than the middle, or put the text on a solid panel over the gradient.

Stops and a direction

linear, 135°
#00696f  0%
#f5c518  100%

The CSS, twice

background: linear-gradient(135deg, #00696f 0.0%,
  #2a7767 9.1%, #4b855c 18.2%, …);
background: linear-gradient(135deg in oklab,
  #00696f 0%, #f5c518 100%);

What options and edge cases does CSS Gradient Generator support?

What each control does
Parameter	Type	Default	Behaviour & edge cases
Linear	angle	135deg	0deg points up, 90deg points right. The angle is the direction the colours travel, not the direction the line leans.
Radial	circle at center	—	Colours run outwards from the middle. `circle` keeps it round in a non-square box; the default `ellipse` stretches with the element.
Conic	from angle	135deg	Colours sweep around the centre. The basis of every CSS pie chart and dial, and of the hue ring in a colour picker.
in oklab	keyword	on	Interpolate perceptually. Supported since 2023 — Chrome 111, Safari 16.2, Firefox 113. Turn it off to see what a plain gradient does with the same stops.
Fallback	12 stops	auto	The OKLab curve sampled into plain stops, emitted as the first of two declarations so older browsers match.
Stop position	0–100%	even	Where on the gradient line the colour lands. Two stops at the same position make a hard edge rather than a blend.
Stop colour	any notation	—	Hex, rgb(), hsl(), oklch() or a CSS colour name. Alpha is kept, and a gradient to `transparent` should specify the colour with alpha 0 rather than the keyword.
Stops	2 or more	2	New stops land in the widest gap, taking the colour the curve already has there, so adding one does not change the gradient.

Frequently asked questions

How do I make a CSS gradient?

Set `background: linear-gradient(135deg, #00696f, #f5c518)` — an angle followed by two or more colours. 0deg runs bottom to top and 90deg runs left to right. Add a percentage after a colour to pin it to a position on the line, use `radial-gradient` for colours radiating from a point and `conic-gradient` for colours sweeping around one. This page writes all three, with the interpolation fix and a fallback, from whatever stops you set.

Why does my gradient go grey in the middle?

Because the browser is averaging gamma-encoded sRGB channels, and the average of two saturated colours from opposite sides of the colour wheel is a desaturated one. Blue to yellow is the classic case. Adding `in oklab` after the angle fixes it — the interpolation then happens in a perceptual space where the midpoint is the colour you would name as halfway. For older browsers, use the twelve-stop fallback this tool emits alongside it.

Is `in oklab` safe to use in production?

Yes, with the fallback. It shipped in Chrome 111, Safari 16.2 and Firefox 113, which covers the overwhelming majority of traffic in 2026. Anything older ignores the whole declaration as invalid — which is why the plain-stop version is emitted first: CSS takes the last declaration it understands, so old browsers keep the fallback and new ones take the OKLab version. Neither ever sees a broken background.

Why does my gradient have visible stripes?

That is banding, and it is a display limitation rather than a CSS one. Across a large area a gradient has to step through a limited set of 8-bit values, and the steps become visible as bands — worst on subtle dark gradients, which is where the values are furthest apart perceptually. More colour stops will not help because the values simply do not exist. A faint noise texture over the top does: a tiled PNG at about 3% opacity, or an SVG feTurbulence layer.

Can I put text on a gradient?

You can, but the contrast ratio is different at every point, so 'it passes' is not a single fact about the element. Check the lightest point and the darkest point the text actually crosses, and treat the worse of the two as the real ratio. Where the range is wide, the practical answer is to put the text on a solid or semi-opaque panel over the gradient rather than directly on it.

How do I fade a gradient to transparent?

Not with the `transparent` keyword. In several engines it resolves to transparent black, so fading a red to it travels through dark muddy pinks. Use the same colour with zero alpha instead — `#ff0000` to `#ff000000`, or `rgb(255 0 0 / 0)` — and the hue holds all the way down. Interpolating in OKLab reduces the effect but does not remove the reason for it.

ToolsByUs team · How we check our tools