Gradients are the process of displaying a smooth transition between two or more colors. It includes both linear and radial gradients.
The gradient is divided into two parts:
The linear gradient will be seen in the straight line and at least two colors should be required. Its default direction is top to bottom. The colors that are used in linear-gradient are called color stops.
Please keep in mind that the default gradient is top to bottom. Let us understand it with the help of an example.
To create a linear gradient from left to right assign gradient direction to the left to right.
To create diagonal gradient, assign gradient direction to bottom left & top top right, top left & to bottom right, bottom right & to top left, top right & to bottom left.
You can replace gradient direction (to bottom, to top, to right, to left, to bottom right, etc.) with angles to more control over the direction of the gradient. Please keep in mind that 0deg refers to bottom-to-top, 90deg refers to left-to-right and 180deg is equivalent to "to the bottom".
Repeating linear gradient can be shown using the repeating-linear-gradient() function. Let us understand it with the help of an example.
Linear gradient can also be created using multiple color stops. Let us see it with the help of an example.