<gradient>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors.

Try it

A CSS gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element to which it applies.

Syntax

The <gradient> data type is defined with one of the function types listed below.

Linear gradient

Linear gradients transition colors progressively along an imaginary line. They are generated with the linear-gradient() function.

Radial gradient

Radial gradients transition colors progressively from a center point (origin). They are generated with the radial-gradient() function.

Conic gradient

Conic gradients transition colors progressively around a circle. They are generated with the conic-gradient() function.

Repeating gradient

Repeating gradients duplicate a gradient as much as necessary to fill a given area. They are generated with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions.

Interpolation

As with any interpolation involving colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of gray from appearing when both the color and the opacity are changing. (Be aware that older browsers may not use this behavior when using the transparent keyword.)

Formal syntax

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

<linear-gradient()> =
linear-gradient( [ <linear-gradient-syntax> ] )

<repeating-linear-gradient()> =
repeating-linear-gradient( [ <linear-gradient-syntax> ] )

<radial-gradient()> =
radial-gradient( [ <radial-gradient-syntax> ] )

<repeating-radial-gradient()> =
repeating-radial-gradient( [ <radial-gradient-syntax> ] )

<linear-gradient-syntax> =
[ <angle> | to <side-or-corner> ]? , <color-stop-list>

<radial-gradient-syntax> =
[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

<side-or-corner> =
[ left | right ] ||
[ top | bottom ]

<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?

<radial-shape> =
circle |
ellipse

<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}

<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<linear-color-stop> =
<color> <length-percentage>?

<linear-color-hint> =
<length-percentage>

<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side

<length-percentage> =
<length> |
<percentage>

Examples

Linear gradient example

A simple linear gradient.

css
.linear-gradient {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

Radial gradient example

A simple radial gradient.

css
.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30 144 255));
}

Conic gradient example

A simple conic gradient example. Note that this isn't supported widely across browser as of yet.

css
.conic-gradient {
  background: conic-gradient(pink, coral, lime);
}

Repeating gradient examples

Simple repeating linear and radial gradient examples.

css
.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    pink,
    pink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    lime,
    lime 15px,
    white 15px,
    white 30px
  );
}

.conic-repeat {
  background: repeating-conic-gradient(lime, pink 30deg);
}

Specifications

Specification
CSS Images Module Level 4
# gradients

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<gradient>
conic-gradient()
Double-position color stops
Hue interpolation method
Interpolation color space
linear-gradient()
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)
to keyword
Unitless 0 for <angle>
radial-gradient()
at syntax
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)
repeating-conic-gradient()
Hue interpolation method
Interpolation color space
repeating-linear-gradient()
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
to keyword
Unitless 0 for <angle>
repeating-radial-gradient()
at syntax
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also