CSS is the mechanism of adding style in the various web documents. One of the important features is CSS gradient. The gradient feature allows you to create a gradient from one color to another without using any images.
There are two types of Gradients.
- Linear Gradients
- Radial Gradients
CSS Linear Gradients
Transitions in linear gradients occur along a straight line determined by a direction or angle. A CSS linear gradient can be coded by using the linear-gradient() function.The minimum two-color required to create a linear gradient. More than two-color elements can be possible in linear gradients. The starting point and the direction is needed for the gradient effect.
The basic syntax of creating the linear gradients using the keywords can be given as:
Linear Gradient - Top to Bottom
In the below example, the transition started to pink color and ended with a blue color from top to bottom. This is the default.
Linear Gradient - Left to Right
In the below example, the transition started to pink color and ended with a blue color from left to right.
Linear Gradient - Diagonal
This transition started from top-left to bottom-right. It starts with the pink transition to blue. For the diagonal gradient, need to specify both horizontal and vertical starting positions.
Angles on Linear Gradients
CSS allows the user to implement directions in Linear Gradients rather than restricting themselves to predefined directions. The angle 0deg creates a bottom to the top gradient, and positive angles represent clockwise rotation, which means the angle 90deg creates a left to the right gradient.
Using Multiple Color Stops
You can also create gradients for more than two colors. The below example will show you how to create a linear gradient using multiple color stops.
Repeating a linear-gradient
CSS allows the user to implement multiple linear gradients using a single function repeating-linear-gradient(). The below example contains three colors in each transition with some percentage value.
CSS Radial Gradients
A radial gradient is different from the linear gradient. By default, the first color starts at the center position of the element and then fades to the end color towards the edge of the element. Fade happens at an equal rate until specified.
The basic syntax of creating a radial gradient can be given as:
Radial Gradient- evenly spaced color stops
Evenly spaced color stops is a default radial gradient. It is by default shape is an eclipse, size is farthest- corner, and position is center.
Radial Gradient - Differently Spaced Color Stops
CSS allows the user to have variation in the spacing of color stops while applying the radial-gradient feature.
Setting the Shape of Radial Gradients
The shape argument of the radial-gradient() function is used to specify the ending shape of the radial gradient. It has the value circle or ellipse.
Setting the Size of Radial Gradients
The size parameter of the radial-gradient() function is used to define the size of the gradient’s ending shape. Size can be set using units or the keywords: closest-side, farthest-side, closest-corner, farthest-corner.
Repeating a radial-gradient
If you want to repeat radial gradients then use repeating-radial-gradient() function.