CSS Gradients Explained: Linear, Radial and Conic (With Examples)

Gradients are one of the cheapest ways to make a page look polished: no image file, no extra request, and they scale to any screen. CSS has three gradient functions, and once you understand colour stops, all three work the same way.

HTML code on a dark screen

Linear gradients

A linear gradient blends colours along a straight line. The angle sets the direction: 0deg goes bottom to top, 90deg left to right, 180deg top to bottom.

.hero {
  background: #ff7e5f;
  background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
}

The first line is a solid fallback for very old browsers; modern ones use the second.

Radial gradients

A radial gradient spreads out from the centre, as a circle or an ellipse that follows the element's shape.

.badge {
  background: radial-gradient(circle, #2193b0 0%, #6dd5ed 100%);
}

Conic gradients

A conic gradient sweeps colours around a centre point, like the hands of a clock. It's ideal for pie-chart effects and colour wheels.

.wheel {
  background: conic-gradient(from 0deg, #c471f5 0%, #fa71cd 50%, #c471f5 100%);
}

Conic gradients work in all current versions of Chrome, Edge, Firefox and Safari.

Colour stops: where the magic happens

Each stop is a colour plus a position. A few tricks:

Hard edges: put two stops at the same position — #ff0000 50%, #0000ff 50% — for a sharp stripe instead of a blend.
Transparency: use rgba() so the gradient fades into whatever is behind it, e.g. rgba(15, 32, 39, 0) to rgba(15, 32, 39, 0.8) over a photo for readable captions.
More than two colours: add stops in between; keep it to three or four for a clean look.

Check text on top of a gradient against its lightest and darkest point — both need enough contrast.

How to build a gradient without guesswork

Open the CSS Gradient Generator and pick one of the eight presets — Sunset, Ocean, Mint, Night and more — or keep the default.
Choose linear, radial or conic, then set the angle or shape.
Adjust each colour stop's colour, position and opacity, and add up to 8 stops.
Copy the CSS (it includes the solid fallback), or download the gradient as a 1920×1080 PNG for slides and wallpapers.

FAQ

Can I animate a gradient? Browsers don't smoothly animate between gradient values directly. A common trick is a larger gradient with an animated background-position.

Gradient or image? For backgrounds and buttons, a CSS gradient is lighter and sharper at any size. Use an image only when you need texture or photography.

Why does my gradient look banded? Long, subtle gradients between close colours can show stripes on some screens. Add a middle stop or increase the colour difference slightly.

A soft pastel gradient background

Try it now

Design your gradient in the free CSS Gradient Generator — it runs in your browser.