CSS gradients explained: linear, radial, conic and hard stops

A gradient is an image the browser draws for you. Once you understand colour stops, you can make almost any background.

Colour stops

A gradient is a list of colour stops. Each stop is a colour and, optionally, a position along the gradient line. linear-gradient(90deg, red 0%, blue 100%) fades from red on the left to blue on the right. If you leave out the positions, the browser spaces the colours evenly. Positions can be percentages or lengths such as 40px.

Direction

linear-gradient(135deg, ...) uses an angle. Zero degrees points up and the angle grows clockwise, so 90deg points right, 180deg down and 270deg left. You can also write words: to right, to bottom, to bottom right. The word form is convenient for sides, and the angle form for any other direction.

Hard stops and stripes

Put two stops at the same position and there is no blend, only an edge: linear-gradient(90deg, #f4b400 50%, #1b2a49 50%) is yellow on the left half and navy on the right half. Repeating the idea gives stripes. The repeating form repeating-linear-gradient(45deg, #f4b400 0 10px, #1b2a49 10px 20px) draws diagonal stripes 10 pixels wide without any picture file.

Transparency

Use rgba() or transparent for a fade into the page. A common use is a dark fade on a photo so that white text is readable: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)) over the picture. A small caution: older browsers blended "transparent" through grey; writing the same colour with zero opacity, such as rgba(0,0,0,0), avoids this.

Radial and conic

A radial gradient spreads from a point: radial-gradient(circle at 30% 20%, #fff 0%, #5b8def 100%) is a spotlight in the upper left. Use circle or ellipse, and closest-side or farthest-corner to choose where the 100% mark lies. A conic gradient sweeps around a point: conic-gradient(from 0deg, red, yellow, green, blue, red) draws a colour wheel. With hard stops it makes pie charts: conic-gradient(#1b2a49 0 35%, #f4b400 35% 100%).

Gradient text

Colour text with a gradient by painting the gradient as the background and clipping it to the letters: set the gradient as background, add -webkit-background-clip: text; background-clip: text; and make the text colour transparent with color: transparent. Always set a normal colour first, so the text is still visible where the effect is not supported.

Why gradients sometimes show bands

A smooth gradient across a large area in two very similar colours can show visible steps, called banding, because the screen cannot show enough in-between values. Add a third, slightly different colour, widen the colour difference, or add a very light noise image on top.

Performance

Gradients are cheap to draw and cost nothing to download. They scale to any screen size without blur, so they often replace small background pictures.

This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.