css type
`<gradient>` CSS type
The <gradient> CSS data type is a special type of image that consists of a progressive transition between two or more colors.
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 class="display-block" id="default-example">
<div id="example-element"></div>
</section>
#example-element {
min-height: 100%;
}
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
Examples
Linear gradient example
A linear gradient.
<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 example
A radial gradient.
<div class="radial-gradient">Radial gradient</div>
div {
width: 240px;
height: 80px;
}
.radial-gradient {
background: radial-gradient(red, yellow, dodgerblue);
}
Conic gradient example
A conic gradient example.
<div class="conic-gradient">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 class="linear-repeat"></div>
<span>Repeating linear gradient</span>
<hr />
<div class="radial-repeat"></div>
<span>Repeating radial gradient</span>
<hr />
<div class="conic-repeat"></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);
}