Linear, radial and conic
The three gradient types differ in how colours are arranged and transition:
- Linear runs along a straight line at an angle.
- Radial spreads outward from a centre as a circle or an ellipse.
- Conic sweeps around a centre like the hand of a clock — the one to use for colour wheels and pie-style fills.
What the angle means
CSS measures gradient angles clockwise from the top, which surprises people expecting the maths convention:
| Angle | Colour runs | Same as |
|---|---|---|
| 0deg | bottom to top | to top |
| 90deg | left to right | to right |
| 180deg | top to bottom | to bottom (the default) |
| 270deg | right to left | to left |
| 135deg | top-left to bottom-right | a diagonal |
For a conic gradient the angle is where the first colour starts, written
from 90deg, again clockwise from the top.
Hard edges and stripes
Two stops at the same position make a sharp edge instead of a blend. Set a stop to 50% and the next one to 50% as well, and the colour changes abruptly at the halfway point. The stop positions here are kept in order — a browser raises any stop placed before an earlier one to match it, so the output states what will actually render — but equal positions are allowed for exactly this reason.
Why gradients go grey in the middle
By default, browsers interpolate gradient colours in sRGB, averaging their red, green and blue channel values. For opposing colours, this can produce a muddy-looking midpoint. Blue (#0000ff) to yellow (#ffff00), for example, passes through #808080—plain grey—at the halfway point.
Approximate midpoint between blue (#0000ff) and yellow (#ffff00)
The hexadecimal values are approximate midpoints for these endpoints. The OKLCh example uses the shorter hue path and CSS Color 4's local-MINDE gamut mapping into sRGB. Other gamut-mapping algorithms may produce slightly different displayed colours.
| Interpolation | Midpoint | What you see |
|---|---|---|
| sRGB (default) | #808080 | Flat grey |
| OKLab | about #6cabc7 | A dull blue-grey |
| OKLCh | about #00bdb0 | A vivid teal |
OKLCh interpolates lightness, chroma and hue in a perceptually oriented colour space. For some colour pairs, it avoids the greyish middle produced by ordinary sRGB interpolation. The trade-off is that the colours between your stops may follow a different path: blue to yellow can pass through teal and green rather than grey. The result depends on the starting colours and the hue-interpolation path, so OKLCh is an option to experiment with rather than a universally better choice.
Browser support, and why a fallback is added
The in oklch, in oklab and similar syntax specifies the colour space used to interpolate a gradient. Explicit gradient interpolation is supported in Chrome and Edge 111+, Safari 16.2+ and Firefox 127+.
A browser that doesn't support this syntax won't automatically fall back to ordinary sRGB interpolation. The affected gradient declaration may be discarded, leaving the element without that gradient background.
For this reason, when you choose OKLCh, OKLab or HSL interpolation, the generated CSS includes a solid-colour fallback before the gradient declaration. This is a colour fallback, not an alternative gradient, so older browsers can show a plain colour instead.
The CSS-variable output handles the fallback differently. If a variable contains a gradient value that the browser doesn't support, a declaration using var() won't automatically revert to an earlier declaration. Instead, the invalid value can make that property declaration invalid at computed-value time. The generated CSS therefore puts the solid fallback in background-color and the gradient in background-image. If the gradient image can't be used, the solid background colour can still show through.
Using a gradient in Tailwind
The Tailwind output is an arbitrary-value class, with underscores standing in for spaces:
bg-[image:linear-gradient(135deg,#ff0066_0%,#7b2ff7_100%)]
It was compiled with Tailwind 3.4 and 4.3 and produced the intended
gradient in both, for linear, radial and conic. A single class can define multiple colour stops and a custom angle, which the named direction utilities
(bg-gradient-to-br and friends) cannot.
Text on a gradient
A gradient has no single background colour, so text contrast can vary across it. Sample the colours beneath the text at several points, especially where the background is lightest or darkest, and check each against the text colour. The WCAG contrast checker helps measure the contrast, while the colour blindness simulator helps you assess whether states distinguished mainly by hue remain distinguishable for people with different types of colour-vision deficiency.
Related colour tools
- Color Palette Generator — pick two or more of its colours as stops.
- Shades and Tints Generator — a gradient between a shade and a tint of one colour looks natural.
- Color Mixer — the single midpoint between two colours, in sRGB or linear light.
Frequently asked questions
How do I make a CSS gradient?
Use the background property with a gradient function: background: linear-gradient(135deg, #ff0066 0%, #7b2ff7 100%). Pick the type, angle and colours above and copy the result.
What does the angle in a linear gradient mean?
It is the direction the colour runs, measured clockwise from the top. 0deg runs bottom to top, 90deg runs left to right, 180deg runs top to bottom, and 135deg is the common top-left to bottom-right diagonal.
How do I use a gradient in Tailwind CSS?
Use an arbitrary-value class with spaces written as underscores, such as bg-[image:linear-gradient(135deg,#ff0066_0%,#7b2ff7_100%)]. The generator above produces it for you, and it works in Tailwind 3.4 and 4.
Why does my gradient look grey or muddy in the middle?
Browsers blend in sRGB by default, which averages the colour channels. Opposite colours cancel towards grey: blue to yellow is exactly #808080 at the midpoint. Choosing OKLCh interpolation changes the path between the colours and can avoid the greyish midpoint produced by sRGB blending. The result depends on the starting colours and the hue-interpolation path.
How do I make a hard edge or stripe in a gradient?
Give two neighbouring stops the same position. Set one stop to 50% and the next to 50% as well, and the colour changes sharply at the halfway point instead of blending.
Can I make radial and conic gradients with Tailwind CSS?
Yes. The generator creates an arbitrary-value background-image class for linear, radial or conic gradients. This lets you use custom angles, shapes and colour stops instead of relying only on Tailwind's predefined gradient utilities. Check that the generated class is detected by your Tailwind build setup.