CSS <gradient> Data Type

The CSS <gradient> data type represents an image consisting of a progressive transition between two or more colors. Gradients are generated by CSS and can be used anywhere an image value is accepted by the property.

Syntax

The <gradient> data type includes linear, radial, and conic gradients, along with repeating versions of each:

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> | <repeating-conic-gradient()>

<gradient> Functions

Function	Description
`linear-gradient()`	Creates a gradient along a straight line.
`repeating-linear-gradient()`	Creates a repeating linear gradient.
`radial-gradient()`	Creates a gradient that radiates outward from an origin.
`repeating-radial-gradient()`	Creates a repeating radial gradient.
`conic-gradient()`	Creates a gradient with color transitions rotated around a center point.
`repeating-conic-gradient()`	Creates a repeating conic gradient.

Color Stops

Gradient functions use color stops to define the colors that appear along the gradient. A color stop can contain only a color or can include a position that controls where the color appears.

linear-gradient(#0088cc, #02bf57)
linear-gradient(to right, #0088cc 0%, #02bf57 100%)
radial-gradient(circle, #0088cc 0%, #02bf57 100%)

Additional color stops can be added to create transitions through three or more colors.

linear-gradient(to right, red 0%, yellow 50%, blue 100%)

<gradient> Example

The following examples show linear, radial, and conic gradients using the same colors:

.linear {
  background: linear-gradient(to right, #0088cc, #02bf57);
}
.radial {
  background: radial-gradient(circle, #0088cc, #02bf57);
}
.conic {
  background: conic-gradient(#0088cc, #02bf57, #0088cc);
}

Browser Result

Linear

Radial

Conic

Although each example uses the same colors, the gradient function determines how those colors are distributed across the generated image.

Because a CSS gradient is a generated image, the <gradient> data type can be used with properties that accept CSS image values, including:

Specifications

The <gradient> data type and gradient functions are defined in the CSS Images Module Level 4 .

CSS <gradient> Data Type