CSS gradients explained: linear, radial and conic

A CSS gradient is an image the browser draws from a list of colours, usable anywhere an image is allowed, most often as a background. There are three kinds: linear-gradient blends along a straight line, radial-gradient spreads outward from a point, and conic-gradient sweeps around a point like the hands of a clock. The CSS gradient generator I built lets you design linear and radial gradients visually and copy the code, and this guide explains the syntax behind them.

Linear gradients

A linear gradient needs a direction and at least two colours:

background: linear-gradient(135deg, #2f6df6, #7c3aed);

Angles start at the top and turn clockwise: 0deg runs bottom to top, 90deg left to right, and 180deg top to bottom, which is the default when you give no direction. You can also use keywords such as to right or to bottom right. The corner keywords are subtly different from 135deg: they adjust the angle to the shape of the box so the middle of the blend runs exactly from corner to corner, while a fixed angle stays the same however the box stretches. The generator has an angle slider, shortcuts for common directions and a set of presets.

Radial gradients

A radial gradient starts at a centre and spreads outward:

background: radial-gradient(circle at top left, #ffffff, #1e293b);

The shape is either circle or ellipse, the default, which stretches to the box's proportions. The position after at sets the centre, defaulting to the middle. A size keyword decides where the last colour lands: closest-side, closest-corner, farthest-side or farthest-corner, the default. Radial gradients are the tool for spotlights, glows and vignettes; the generator offers both shapes and nine centre positions. Layer several soft radial gradients and you get the blurred-blob look that the mesh gradient generator builds by dragging colour points.

Conic gradients

A conic gradient changes colour as you go around a centre point, not away from it:

background: conic-gradient(from 0deg at 50% 50%, red, yellow, lime, aqua, blue, magenta, red);

That draws a colour wheel. Colour stops are given as angles or percentages of the full turn, which makes conic gradients ideal for pie charts: conic-gradient(#2563eb 0 40%, #e5e7eb 40% 100%) draws a 40 percent slice, and adding border-radius: 50% to the element turns it into a pie. All current major browsers support it. My generator does not build conic gradients, but the text gradient generator and the gradient border generator both offer conic options.

Colour stops and hard edges

Each colour stop is a colour with an optional position. Stops without positions are spread evenly; positions can be percentages or lengths. When two neighbouring stops share a position, there is no room to blend, so you get a hard edge:

linear-gradient(90deg, #ef4444 50%, #3b82f6 50%)

That splits a box into two solid halves. Combine hard stops with repeating-linear-gradient and you get stripes, such as repeating-linear-gradient(45deg, #111 0 10px, #fff 10px 20px). A single percentage between two stops, called a colour hint, moves the midpoint of the blend towards one side. When you add a colour in the generator, it goes into the widest gap between existing stops, so it changes the result straight away rather than sitting on top of another stop.

Layering, smooth blends and pitfalls

• Layer with commas. Several gradients, and images, can share one background; the first listed is on top. A gradient from semi-transparent black to transparent over a photo is the classic way to make overlaid text readable.
• Watch the muddy middle. Blending two far-apart hues, such as blue and yellow, in the default sRGB space can pass through a dull grey. Adding a brighter middle stop fixes it, and newer browsers also accept an interpolation space, as in linear-gradient(in oklch, blue, yellow).
• Gradients are images. They go in background or background-image, not background-color, and a plain transition will not animate between two gradients; animate background-position instead.
• Banding. Very subtle gradients across large areas can show visible steps; a little more colour difference, or a faint noise texture on top, hides them.
• Check text contrast at both ends of the gradient, as WCAG contrast ratio explained: AA, AAA and the formula explains; text must pass at its weakest point.

Every colour in these examples is a hex code; Hex colour codes, explained covers that notation, including the alpha versions that make transparent gradient stops.