Linear, radial, conic and mesh: every type of gradient explained

There are four main types of gradients: linear, radial, conic and mesh. Linear gradients change colour along a straight line, radial gradients spread outwards from a point, conic gradients sweep around a centre like a clock hand, and mesh gradients blend several points of colour at once in two dimensions. Around them sit a few useful variations: repeating gradients, freeform gradients and grain, which is a texture laid on top rather than a type of its own.

Below, each type gets a live example you can copy, a note on what it is good at, and a link to its full guide. If you are starting from zero, what a gradient is explains stops, positions and colour spaces first.

Linear gradients

A linear gradient runs along a straight line at an angle you choose. In CSS the default direction is top to bottom, 0deg points up, and angles turn clockwise, so 90deg runs left to right and 135deg runs from the top left corner towards the bottom right. It is the most common type by far, because it is predictable, fills any rectangle cleanly and suggests light falling from one side.

Use linear gradients for page and post backgrounds, buttons, banners and anything that needs to tile or scale predictably. The syntax and its details are in CSS linear gradients, and choosing a direction is covered in gradient angle.

Radial gradients

A radial gradient starts at a point and spreads outwards as a circle or an ellipse. Moving that point off centre is the trick that makes it look like light: a glow from the upper left reads as a lamp, a sun or a highlight on a curved surface. Radial gradients are also how most soft vignettes and spotlight effects are built.

Use radial gradients for glows, spotlights, vignettes, orbs and anything that should feel lit from a point. See radial gradients for sizing keywords such as closest-side and farthest-corner.

Conic gradients

A conic gradient changes colour as you travel around a centre point, rather than away from it. Picture the sweep of a clock hand. That makes it the natural choice for colour wheels, pie charts, loading rings and angular sheens like brushed metal or the rainbow flash on a holographic foil.

Use conic gradients for wheels, charts, sheens and iridescence. The full guide is conic gradients, and the foil look is in holographic gradients.

Repeating gradients

Each of the three CSS types has a repeating version. Instead of stretching one blend across the whole shape, it repeats a short blend over and over. With hard stops that gives you crisp stripes, rings and sunbursts with no image files at all.

Mesh and freeform gradients

A mesh gradient places colour at several points across a surface and blends them all in two dimensions. Illustrator calls its point-and-grid version a gradient mesh and its looser version a freeform gradient. Either way, the result has no single direction, which is why it looks organic, like light through water or paint that has run. CSS has no mesh type, but you can fake one convincingly by stacking soft radial gradients over a base colour.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 18% 22%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 82% 18%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 70% 85%, #f472b6 0px, transparent 55%),
    radial-gradient(at 25% 80%, #14b8a6 0px, transparent 50%);
}

Use mesh gradients for hero backgrounds, wallpapers, album art and brand fields that should feel alive. The pitfalls, mainly mud and banding, are in mesh gradients.

Grain and texture: the layer on top

Grain is not a gradient type, but it changes how every type reads. A fine layer of noise hides the stripes that smooth blends can show on screens, and it makes digital colour feel printed or filmic. Other materials, such as paper, glass and silk, do the same job with a different voice. See grainy gradients for how much to add.

Which type of gradient to use

If you want a finished field with colour, light and grain already balanced, that is what a Mark is, and you can design with any Mark in the Market for free.