Codectionary / Developer documentation / CSS

Gradients

CSS gradients generate smooth transitions between colors without needing an image file. linear-gradient() transitions along a straight line/angle, radial-gradient() transitions outward from a center point, and conic-gradient() transitions around a center point like a color wheel. Gradients are used as background-image values.

Syntax

linear-gradient(direction, color1, color2);
radial-gradient(shape, color1, color2);

Examples

linear-gradient()

A gradient along a straight line, with a controllable angle.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}.preview-swatch{width:9rem;height:9rem}figure{margin:.5rem}

.basic {
  background: linear-gradient(to right, #667eea, #764ba2);
}

.angled {
  background: linear-gradient(135deg, #ff6b6b, #feca57);
}

.multi-stop {
  background: linear-gradient(to right, red, yellow 30%, green);
}
  1. Each labelled surface matches one gradient selector.
  2. The visible colour changes come from CSS-generated images, not downloaded assets.
  3. Change the angle, shape or stop positions to compare the resulting colour distribution.
HTML used by this example
<div class="preview-row"><figure><div class="basic preview-swatch"></div><figcaption>basic</figcaption></figure><figure><div class="angled preview-swatch"></div><figcaption>angled</figcaption></figure><figure><div class="multi-stop preview-swatch"></div><figcaption>multi-stop</figcaption></figure></div>

radial-gradient() and conic-gradient()

Gradients that radiate from or rotate around a center point.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}.preview-swatch{width:9rem;height:9rem}figure{margin:.5rem}

.radial {
  background: radial-gradient(circle, #ffffff, #a1c4fd);
}

.conic {
  background: conic-gradient(from 0deg, red, yellow, green, blue, red);
  border-radius: 50%; /* a classic use case: a color wheel */
}
  1. Each labelled surface matches one gradient selector.
  2. The visible colour changes come from CSS-generated images, not downloaded assets.
  3. Change the angle, shape or stop positions to compare the resulting colour distribution.
HTML used by this example
<div class="preview-row"><figure><div class="radial preview-swatch"></div><figcaption>radial</figcaption></figure><figure><div class="conic preview-swatch"></div><figcaption>conic</figcaption></figure></div>

Parameters and values

  • linear-gradient() (function): Transitions colors along a straight line or angle
  • radial-gradient() (function): Transitions colors outward from a center point
  • conic-gradient() (function): Transitions colors around a center point, like a pie chart

Best practices

  • Use gradients instead of image files for simple color transitions - they render sharply at any resolution and add no HTTP request
  • Add explicit color stop percentages (yellow 30%) when you need precise control over where each color transition happens
  • Use conic-gradient() for pie charts, color wheels, or loading spinners - it is the only gradient type that rotates around a point
  • Layer a gradient over a background-image (comma-separated) to create image overlays without extra markup

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading