CSS Gradient
The <gradient> CSS data type is a special type of image that consists of a progressive transition between two or more colors.
Types of the CSS gradient:
-
linear-gradient
-
radial-gradient
-
repeating-linear-gradient
-
repeating-radial-gradient
-
conic-gradient
Linear Gradient:
Ex. 1
HTML Code:
<div class="linear-gradient">Linear gradient</div>
CSS Code:
div {
width: 240px;
height: 80px;
}.linear-gradient {
background: linear-gradient(to right,
red, orange, yellow, green, blue, indigo, violet);
}
Radial gradient:
Ex. 2
HTML Code:
<div class="radial-gradient">Radial gradient</div>
CSS code:
div {
width: 240px;
height: 80px;
}.radial-gradient {
background: radial-gradient(red, yellow, rgb(30, 144, 255));
}