CSS Gradients in 2026: Linear, Radial, Conic, and the Banding Problem

CSS gradients went from a novel CSS3 feature in 2010 to ubiquitous in modern web design within a few years. They are the right tool for adding visual interest to a flat layout without using images: they scale to any size, render crisply on any display, and cost almost nothing to download because they are just a few hundred bytes of CSS. The only real limitation is something most people do not notice until they design dark backgrounds: gradient banding from 8-bit color depth.

Linear gradients: the workhorse

The most common gradient type. Defines a line, paints colors along it.

background: linear-gradient(135deg, #667eea, #764ba2);

The first argument is the direction. You can use angles (0deg points up, 90deg right, 180deg down, 270deg left, 360deg back up) or keywords (to right, to bottom right, etc.). Keywords are more readable; angles let you specify in-between directions.

Subsequent arguments are color stops. The simplest case is two colors, equally spaced from start to end. For more control, add explicit positions:

background: linear-gradient(
  to right,
  red 0%,
  yellow 50%,
  green 100%
);

You can omit the percentages on the endpoints (they default to 0% and 100%), and you can have as many stops as you want.

Radial gradients: spotlights

Radial gradients radiate outward from a center point in concentric ellipses or circles.

background: radial-gradient(circle at center, #fffacd, #ff8c00);

The "circle" or "ellipse" controls the shape. The "at" specifies the center position (default is center of the element). Useful for spotlight effects, attention focal points, or simulating soft lighting.

A common pattern: a radial gradient with the transparent color in the middle creates a vignette effect. This works as an overlay on top of other content:

background: radial-gradient(
  ellipse at center,
  transparent 0%,
  rgba(0,0,0,0.6) 100%
);

Conic gradients: the newest type

Conic gradients rotate colors around a center point, like pie chart slices. They are useful for color wheels, progress indicators, and certain decorative effects.

background: conic-gradient(red, yellow, green, blue, red);

The colors are placed at equal angles around the circle. Repeat the first color at the end if you want a clean wrap-around.

Conic gradients are supported in all modern browsers (since 2021), but I do not use them much because the use cases are narrow. Linear gradients handle most needs.

The banding problem

This is the one that catches people designing dark UI. A subtle gradient across a large area produces visible stripes of color rather than a smooth transition. The cause is 8-bit color depth: each channel has 256 possible values, and a gradient from one color to a slightly different color may only have 5-10 distinct values along its length. The eye perceives these as bands, not a smooth gradient.

The banding is most visible in:

• Subtle dark gradients (#181818 to #1f1f1f).
• Large gradients spanning the full viewport.
• Areas without other visual texture to mask the banding.

The fix that designers use: add a faint noise overlay. A 1-2% opacity noise texture (a tiny PNG of random pixel values, repeated as a background) breaks up the bands and makes the gradient feel smooth. Apple has been using this trick for years; their dark UI gradients all have subtle noise.

CSS has no built-in noise generator (though there is a proposal). The current approach is to include a small noise PNG or to use an SVG filter to generate noise. Neither is ideal; it would be nicer if CSS gradients were dithered automatically. Maybe someday.

Color stops with hints

CSS gradients support "color hints" - a single number between two stops that shifts where the midpoint of the transition sits. By default, the midpoint between two stops is 50% (an even blend). A color hint of 25% makes the transition spend more time near the first color and less near the second.

background: linear-gradient(
  to right,
  red,
  25%, /* color hint - midpoint is now at 25% */
  blue
);

This is rarely used but occasionally useful for non-linear color transitions.

Repeating gradients

Adding "repeating-" to the gradient type creates a tiling pattern.

background: repeating-linear-gradient(
  45deg,
  #333 0px,
  #333 10px,
  #555 10px,
  #555 20px
);

This produces a diagonal striped pattern. Useful for decorative backgrounds, progress bars, hatching effects.

Multiple gradients in one background

You can stack gradients by separating them with commas. The first gradient is on top.

background:
  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url("hero-image.jpg");

This puts a dark overlay over a background image, making text readable on top. Common pattern for hero sections.

When to use a gradient vs an image

For solid color transitions, gradients are almost always better than images: smaller files, infinite scalability, crisp at any resolution, easy to edit.

For photographs, abstract art, or anything that is not just a color transition, images are right. A gradient cannot represent the texture of an actual photograph; it can only approximate the overall color tone.

The Toolium CSS Gradient Generator handles linear and radial gradients with a visual editor: pick colors, drag stops, see live preview, copy the CSS. It does not currently do conic gradients (the use cases are too narrow to justify a full editor UI), but the CSS for conic is simple enough to write by hand.