Gradients: Linear, Radial and Conic

The idea in plain language

A CSS gradientCSS gradient An image generated by the browser that blends two or more colours, written with linear-gradient(), radial-gradient() or conic-gradient(). Because it is an image, it goes in background-image rather than background-color, and it costs no network request. See the glossary is an image the browser paints for you: a smooth blend between colours, drawn at any size with no file to download. There are three families – linear (along a line), radial (outwards from a point) and conic (around a point, like a clock hand) – and each has a repeating version.

Writing the three kinds

.linear  { background-image: linear-gradient(135deg, #1D4ED8, #FACC15); }
.radial  { background-image: radial-gradient(circle at 30% 30%, #ffffffaa, transparent 40%), linear-gradient(#1D4ED8, #1E3A8A); }
.conic   { background-image: conic-gradient(#A34A28 0 40%, #E9B496 0 75%, #2F6B4F 0); border-radius: 50%; }

• Linear: with no direction it runs top to bottom; 0deg points up and angles turn clockwise.
• Radial: by default an ellipse from the centre that reaches the farthest corner.
• Conic: starts at the top and sweeps clockwise; perfect for pie charts and colour wheels.

Colour stops and hard stops

Each colour stopColour stop A colour placed at a position along a CSS gradient, for example red 40%. The browser blends between neighbouring stops; two stops at the same position create a hard edge instead of a fade, which is how stripes and pie charts are drawn. See the glossary is a colour at a position. Without positions, stops are spread evenly. Giving two neighbouring stops the same position produces a hard stop – a sharp line – which is how the conic pie chart above gets its slices: #A34A28 0 40% fills 0–40%, then the next colour starts at the previous stop.

Worked example: a blend, its fallback and its text

We built a 135° blue-to-yellow gradient in our CSS Gradient Generator, blending in the OKLCHOKLCH A CSS colour space that describes a colour by perceptual lightness (L), chroma (C, colourfulness) and hue (H). Because equal steps look roughly equal to the eye, it is useful for building colour palettes and smooth gradients, written as oklch(70% 0.15 250). See the glossary colour space. The generator exported:

.hero {
  background-image: linear-gradient(135deg, #1D4ED8 0%, #FACC15 100%);          /* fallback */
  background-image: linear-gradient(135deg in oklch, #1D4ED8 0%, #FACC15 100%); /* modern */
}

Gradients between hex colours blend in sRGB by default, which can look dull in the middle between distant hues. in oklch blends perceptually and keeps the middle vivid; browsers that do not understand it keep the first line.

Then the contrast check. The generator measures text contrast across the whole gradient, and for white text the worst point is only 1.53:1 – the yellow end. A darker gradient behaves very differently: cream text #F7F4EC over #3A2B23 → #2A1F1A has a worst case of 12.33:1, comfortably above the 4.5:1 that body text needs.

Common mistakes

• Using background-color – the gradient is silently ignored.
• No solid fallback colour under the gradient, so text disappears if the image fails.
• Checking contrast against the average colour instead of the weakest point.

Our blog has a longer complete guide to CSS gradients and a list of gradient mistakes and fixes once they are published.

Try it

Open the CSS Gradient Generator, set the angle to 135°, choose two colours and switch the colour space between sRGB and OKLCH to see the difference. Type your text colour into the checks panel to see the worst-case contrast.