Gradients

Syntax

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

Examples

.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);
}

.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 */
}

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

At a glance

Purpose

Presentation and layout

File extension

.css

Runs in

Web browsers

Usually used with

HTML and JavaScript

Specifications & further reading

• CSS specifications (modules)

Related CSS documentation