The <gradient>
CSS data type is a special type of <image>
that consists of a progressive transition between two or more colors.
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
Gradient functions
The <gradient>
data type is defined with one of the function types listed below.
Linear gradient
Transitions colors progressively along an imaginary line. Generated with the linear-gradient()
function.
<div class="linear-gradient">Linear gradient</div>
div { width: 240px; height: 80px; }
.linear-gradient { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); }
Radial gradient
Transitions colors progressively from a center point (origin). Generated with the radial-gradient()
function.
<div class="radial-gradient">Radial gradient</div>
div { width: 240px; height: 80px; }
.radial-gradient { background: radial-gradient(red, yellow, rgb(30, 144, 255)); }
Repeating gradient
Repeats a gradient as much as necessary to fill the entire element. Generated with the repeating-linear-gradient()
and repeating-radial-gradient()
functions.
<div class="linear-repeat">Repeating linear gradient</div> <br> <div class="radial-repeat">Repeating radial gradient</div>
div { width: 240px; height: 80px; }
.linear-repeat { background: repeating-linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px); } .radial-repeat { background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px); }
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.)
Specification
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 3 The definition of '<gradient>' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
Each gradient type has different compatibility. Please consult the article for each specific type for more information.
See also
- Using CSS gradients
- Gradient functions:
linear-gradient()
,radial-gradient()
,repeating-linear-gradient()
,repeating-radial-gradient()