CSS Gradient
CSS gradients provide a flexible solution to generate smooth transitions between two or more colors. Previously, achieving such effects required using images.
With CSS3 gradients, download time can be reduced, and bandwidth usage is optimized. Elements with gradients can be scaled without losing quality, and the rendering is faster since it's generated by the browser.
There are two main types of gradients: linear and radial gradients.
Linear gradients in CSS3 can go up, down, left, right, or diagonally. To create a linear gradient, define two or more color stops that create a smooth transition. You can also specify a starting point and direction along with the gradient effect.
Radial gradients, on the other hand, start from a single point and smoothly spread outward in a circular or elliptical shape, rather than fading in a single direction like linear gradients.
CSS gradients offer powerful and flexible ways to apply color transitions to elements, allowing for visually appealing effects without the need for images.
Linear Gradient - Top to Bottom
This is the basic type of linear gradient which directions from top to bottom.
Input:-
Output:-
Linear Gradient - Left to Right
The following example shows the linear gradient that starts from the left and goes to the right.
Input:-
Output:-
Linear Gradient - Diagonal
We can also create a gradient along the diagonal direction. The following example will create a linear gradient from the bottom left corner to the top right corner of the element's box.
Input:-
Output:-
Repeating the Linear Gradients
We can repeat linear gradients using the repeating-linear-gradient() function.
Input:-
Output:-
Setting the Shape of Radial Gradients
The shape argument of the radial-gradient() function is used to define the ending shape of the radial gradient. It can take the value "circle" or "ellipse".
Input:-
Output:-
Setting the Size of Radial Gradients
The size argument 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.
Input:-
Output:-
Repeating the Radial Gradients
We can repeat linear gradients using the repeating-linear-gradient() function.
Input:-
Output:-
