How to Create a CSS Gradient (Linear, Radial & Conic)

A CSS gradient is a smooth blend between two or more colours, generated by the browser as an image. Because it is computed rather than downloaded, a gradient adds zero network requests, scales to any size without pixelation, and can be changed by editing a single line. This guide covers all three gradient types, the syntax that matters, and the mistakes that trip people up.

Gradients are images, not colours

The first thing to understand: a CSS gradient is an <image> value, not a <color>. That means it goes wherever an image goes — most often background or background-image — and not in properties that expect a flat colour like color or border-color.

.hero {
  background: linear-gradient(135deg, #0066ff, #7c3aed);
}

That one line paints a diagonal blue-to-purple blend across the element.

Linear gradients

A linear gradient blends colours along a straight line. The syntax is:

linear-gradient(<angle>, <color-stop>, <color-stop>, ...)

The angle sets the direction. 0deg points straight up, 90deg points right, 180deg points down, 135deg gives the popular top-left-to-bottom-right diagonal. You can also use keywords like to right or to bottom left.

Each colour stop is a colour with an optional position:

linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%)

Here red sits at the start, yellow at the midpoint, green at the end. If you omit the positions, the browser spaces the stops evenly.

Radial gradients

A radial gradient blends outward from a centre point, like a spotlight:

radial-gradient(circle, #ffffff, #0066ff)

The first keyword sets the shape — circle or ellipse. You can also control where the centre sits and how far the gradient reaches, but radial-gradient(circle, ...) covers most real use: soft spotlights, vignettes, and glowing backgrounds.

Conic gradients

A conic gradient sweeps colours around a centre point, like the hand of a clock:

conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #ff0000)

The from value sets the starting angle. Conic gradients are how you build pie-chart segments, colour wheels, and modern decorative accents in pure CSS — no SVG or images needed. They are the most underused of the three.

Hard stops: gradients are not just for blends

Place two colour stops at the same position and the blend becomes a hard edge. This turns the gradient feature into a stripe generator:

linear-gradient(90deg, #0066ff 50%, #7c3aed 50%)

That produces a clean two-colour split with no blend at all — useful for stripes, split backgrounds, and progress-bar fills.

Common mistakes

A few errors account for most "my gradient is not showing" problems:

• Using it as a colour. color: linear-gradient(...) does nothing. A gradient is an image; it belongs in background.
• Forgetting the element has no size. A gradient on a <div> with no height paints nothing because the box is zero pixels tall.
• Too many stops, too close together. Five stops crammed into a small element reads as muddy banding rather than a smooth blend. Two or three well-spaced stops almost always look better.
• Clashing colours. A gradient between two colours far apart on the colour wheel can pass through a muddy grey-brown in the middle. Colours closer in hue blend more cleanly.

Layering gradients

The background property accepts a comma-separated list, so you can stack gradients. A semi-transparent gradient layered over a solid one — or over an image — is how you get a readable text overlay on a busy photo:

background:
  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url('photo.jpg');

Build one visually

Typing colour stops by hand is fine once you know the syntax, but a visual tool is faster for iterating. The Gradient Generator lets you add and reposition stops, switch between linear, radial and conic, set the angle, and copy production-ready CSS. To fine-tune the individual colours — converting between HEX, RGB and HSL — pair it with the Colour Converter.

The short version

A CSS gradient is a browser-generated image. linear-gradient blends along a line, radial-gradient blends outward from a point, and conic-gradient sweeps around one. Colour stops control where each colour sits, and stops at the same position create hard edges for stripes. Keep the stops few and well-spaced, remember it belongs in background, and build it visually with the Gradient Generator.