CSS Gradients
Gradients
There are three types of gradients:
linear-gradient
radial-gradient
conic-gradient
These each take 2 or more colors which are stepped through by the gradient function. There are further optional arguments described below.
There are also repeating- versions of each function.
Direction
The optional first argument to a gradient function sets the direction. It can either be a key phrase or an angle.
Each of the following key phrases are valid:
to top
to top right
to right
to bottom right
to bottom
to bottom left
to left
to top left
Valid units for angles are:
deg
rad
grad
turn which is a metric expression of circles; 1turn equals 360deg
.gradient {
linear-gradient(to left top, #fff, #000);
}
Color Hints
Color Stops
Animated Gradients
Gradients are images and as such cannot be directly animated. Instead apply a transition effect on their position.
.gradient {
background-image: linear-gradient(45deg, #fff, #000);
background-size: 300%;
background-position: left;
transition: background-position 1s;
}
.gradient:hover {
background-position: right;
}