CSS gradients are used to create smooth transitions between two or more specified colors. They can be used to add visual interest to a webpage and can be used as a replacement for background images.
There are two types of CSS gradients:
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
To create a linear gradient, you can use the background-image property and the linear-gradient() function. The linear-gradient() function takes in at least two color stops (colors) and an optional direction.
Here is an example of a linear gradient that goes from black to white:
.gradient {
background-image: linear-gradient(to right, black, white);
}
You can also specify multiple color stops to create a more complex gradient:
.gradient {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
To create a radial gradient, you can use the radial-gradient() function. It works the same way as linear-gradient(), but the gradient starts from a single point and radiates outward.
Here is an example of a radial gradient that starts from a red center and transitions to a blue outer ring:
.gradient {
background-image: radial-gradient(red, blue);
}
You can also specify additional parameters for the radial-gradient() function such as the shape, size, and position of the gradient.