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

Try it

background: linear-gradient(#f69d3c, #3f87a6);

background: radial-gradient(#f69d3c, #3f87a6);

background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);

background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);

background: conic-gradient(#f69d3c, #3f87a6);

<section>  <div></div></section>

#example-element {  min-height: 100%;}

A CSS gradient hasno 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 thelinear-gradient() function.

Radial gradient

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

Conic gradient

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

Repeating gradient

Repeating gradients duplicate a gradient as much as necessary to fill a given area. They are generated with therepeating-linear-gradient(),repeating-radial-gradient(), andrepeating-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 thetransparent 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>|<zero>|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 linear gradient.

<div>Linear gradient</div>

div {  width: 240px;  height: 80px;}

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

Radial gradient example

A radial gradient.

<div>Radial gradient</div>

div {  width: 240px;  height: 80px;}

.radial-gradient {  background: radial-gradient(red, yellow, dodgerblue);}

Conic gradient example

A conic gradient example.

<div>Conic gradient</div>

div {  width: 200px;  height: 200px;}

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

Repeating gradient examples

Repeating linear and radial gradient examples.

<div></div><span>Repeating linear gradient</span><hr /><div></div><span>Repeating radial gradient</span><hr /><div></div><span>Repeating conic gradient</span>

div {  display: inline-block;  width: 240px;  height: 80px;}span {  font-weight: bold;  vertical-align: top;}

.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

Browser compatibility

See also

• Using CSS gradients
• Gradient functions:linear-gradient(),repeating-linear-gradient(),radial-gradient(),repeating-radial-gradient(),conic-gradient(),repeating-conic-gradient()
• CSS Basic Data Types
• CSS values and units module
• Learn: Values and Units