Gradients displays the combination of two or more colors as shown below.CSS gradients let you display smooth transitions between two or more specified colors.
Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. Let's go through it all.
CSS gradients are represented by the
Gradients can be used anywhere you would use an , such as in backgrounds. Because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. In addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly
Linear gradients are used to arrange two or more colors in linear formats like top to bottom
Perhaps the most common and useful type of gradient is the linear-gradient(). The gradients "axis" can go from left-to-right, top-to-bottom, or at any angle you chose.
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
A linear gradient creates a band of colors that progress in a straight line.
By default, linear gradients run from top to bottom. You can change their rotation by specifying a direction.
You can even make the gradient run diagonally, from corner to corner.
You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.
If you want more control over its direction, you can give the gradient a specific angle.The angle is specified as an angle between a horizontal line and the gradient line.
background: linear-gradient(angle, color-stop1, color-stop2);
You don't have to limit yourself to two colors—you may use as many as you like! By default, colors are evenly spaced along the gradient.
You don't have to leave your color stops at their default positions. To fine-tune their locations, you can give each one a percentage or absolute length value. If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want. If you leave a location unspecified, the position of that particular color stop will be automatically calculated for you.
As with linear gradients, all you need to create a radial gradient are two colors.
The size keywords tell the radial gradient where the farthest radius should be; i.e. the place where the last colour becomes fully saturated.This can be at the closest or farthest side or corner. The default is farthest-corner. If you need a more specific size, use length units instead of keywords.
The size parameter defines the size of the gradient. It can take four values: