CSS Gradients

A gradient is a smooth blend from one colour to another, and CSS can generate them entirely in the browser with no image files at all. That matters for more than convenience. Because a gradient is computed rather than downloaded, it adds no extra request, scales cleanly to any screen size without going blurry, and can be tweaked by changing a single line of CSS. They are one of the most useful design tools available for backgrounds, overlays, and accents. This article covers the three kinds of gradient, how to shape and direct them, the colour stops that give you fine control, and the habits that keep them robust and maintainable.

Linear gradients

The most common type blends colours along a straight line, and you control the direction with a keyword or an angle.

.box {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

This transitions smoothly from the first colour on the left to the second on the right. The first value sets the direction, and you can use natural keywords like to right, to bottom, or to bottom right, or specify an exact angle when you want something diagonal.

.box {
  background: linear-gradient(45deg, #ff7e5f, #feb47b);
}

An angle of 45 degrees runs the gradient diagonally, and the values after the direction are the colours, called colour stops. You are not limited to two, and you can control how much space each colour occupies by giving each stop a position. Adding a percentage after a colour tells the browser where that colour should land, so linear-gradient(to right, #ff7e5f 30%, #feb47b 70%) holds the first colour solid until thirty percent, blends across the middle, and settles into the second colour from seventy percent on. This is how you make one colour dominate, create sharp bands, or fine-tune exactly where the transition happens.

Radial gradients

Where a linear gradient moves along a line, a radial gradient radiates outward from a central point, producing circular or elliptical transitions.

.box {
  background: radial-gradient(circle at center, #ff7e5f, #feb47b);
}

This starts with the first colour at the centre and fades to the second as it spreads outward. You have two main controls. The shape is either circle or ellipse, and the size and position let you decide how far the gradient reaches and where its centre sits, using keywords like closest-side and farthest-corner or explicit coordinates.

.box {
  background: radial-gradient(ellipse farthest-corner at 50% 50%, #ff7e5f, #feb47b);
}

Here the gradient is an ellipse centred in the middle of the box, reaching all the way to the farthest corner before completing its transition. Radial gradients are the tool for spotlight effects, soft glows, and anything that should feel like it emanates from a point.

Conic gradients

The third type rotates its colours around a central point rather than along a line or outward from one, which makes it look like a colour wheel or a pie chart.

.box {
  background: conic-gradient(from 0deg at center, #ff7e5f, #feb47b, #ff7e5f);
}

The colours sweep around the centre, and repeating the first colour at the end, as here, makes the rotation loop seamlessly. Conic gradients are how you build pie and donut charts in pure CSS, colour pickers, and angular decorative effects that the other two types cannot produce.

Repeating gradients

Each of these types has a repeating variant, repeating-linear-gradient, repeating-radial-gradient, and repeating-conic-gradient, which tile the colour stops across the element instead of stretching them once. Defining a small band of colour stops and letting it repeat is how you create stripes, checks, and pattern effects without any image, which is both lightweight and infinitely scalable.

Habits that keep gradients solid

A few practices make gradients reliable in production. Although support is excellent in modern browsers, it is worth providing a plain background colour first, so any browser that cannot render the gradient still shows a sensible solid colour.

.box {
  background: #ff7e5f;                               /* fallback */
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

The browser uses whichever declaration it understands last, so a capable browser applies the gradient and an older one falls back to the solid colour. On performance, gradients are generated by the browser and are generally fast, but very complex repeating or conic gradients can tax lower-end devices, so use the elaborate ones with a little restraint. And for maintainability, store your gradient colours in CSS custom properties when you reuse them across a project.

:root {
  --start-color: #ff7e5f;
  --end-color: #feb47b;
}
.box {
  background: linear-gradient(to right, var(--start-color), var(--end-color));
}

Now a single change to the variables updates every gradient that uses them, which keeps a colour scheme consistent and easy to retune.

Conclusion

CSS gradients give you smooth, scalable colour transitions with no image files and no extra requests. Use a linear gradient to blend along a line with a direction or angle, a radial gradient to radiate from a point with a shape and size, and a conic gradient to sweep colours around a centre for wheels and pie charts, with repeating variants of each for stripes and patterns. Control the blend precisely with positioned colour stops and their percentages, provide a solid fallback colour for safety, go easy on the most complex gradients for performance, and keep your colours in custom properties so the whole scheme stays consistent. With these, you can add depth and polish to a design using nothing but CSS.

See you soon.