Mastering Gradients in CSS: A Beginner's Guide

Gradients are gradual transition between two or more colors. They are used to create a smooth continuous change from one color to another. Gradients are used to add colored stripes and blends to backgrounds. They are usually treated as value to background-image property or to the background property.
Background gradients were introduced to CSS in 2008. The introduction of background gradients enabled developers to create appealing and dynamic backgrounds with better performance and faster load times.
There are three major types of gradients.
• Linear-gradient,
• Radial-gradient,
• Conic-gradient,
• And a repeating version of each.

Linear-gradient

linear-gradient is a kind of gradient that flows in a line. The line could be in any direction, and the direction could be specified either as an angle or as a named direction (to top, to bottom, to left or to right). If the direction is omitted, gradient will flow from top to bottom.
It is also required to have at least two colors for the gradient to work. You can also add start and stop points for each color. This is optional as by default, the gradient colors are evenly distributed. The points could be written in percentages or specific lengths.
Syntax
Background: linear-gradient( direction, color start-point stop-point, another color ….)
Example

 background: linear-gradient(red, green, blue);

In this example, direction and color points were not given. Therefore, the colors flowed from top to bottom and were evenly blended into each other as it went.
Example 2

 background: linear-gradient(to right, green, white, green);

0r we could use angles to specify the direction.

background: linear-gradient(45deg, red, blue, green);

Start points
Start points are used to specify where the color should start with no blend of the previous color. If only one value is added, it is taken as the start point. Start point for the first color is 0.
To illustrate start and stop points, I will add ten equal elements in the body, and give each a border-top of 2px. Each of these border-tops will help us with the demarcation for each ten%.

background: linear-gradient(to bottom, red, blue 40%, green 70%);

From the illustration above, the start point for color red is zero by default. Then color blue stars to blend into color red up until 40% where it becomes a hard blue. But color green creeps in soon, but at 70% it becomes fully green with no more traces of blue.

Stop point

You can also specify stop points, which will be the point the color can start blending into the next color.
Example

background: linear-gradient(to bottom, red 30%, blue 40% 60%, green 70%);

With a stop point of 30% for color red, blue is not allowed to blend into red until it gets to 30%. Then since blue also has a start point of 40%, blending of red and blue is only allowed between 30% and 40%. So we have a hard blue from 40% to 60% before the next color (green) starts blending in. then at 70%, which is the start point for hard green, the blue stops. The stop point of the last color is 100% by default.
To create complete hard colors without blending into each other, the stop point of the previous color should be the same with the start point of the next color.
Example 2

background: linear-gradient(to right, green 0 33%, white 33% 66%, green 66%);

Radial-gradient:

Radial gradient presents colors in circular or oval form. The colors radiates out from the center, unless otherwise indicated.
Example

background: radial-gradient(white, blue);

You can specify that instead of an eclipse-shaped gradient, you will have a circle irrespective of the aspect ratio of your device screen.

 background: radial-gradient(circle, white, blue);

You can specify where you want the colors to radiate from

background: radial-gradient(circle at top, white, blue);

You can also specify the direction with percentages or other measuring units.

background: radial-gradient(circle at 15% 95%, white, blue);

You may also add start/ stop points to the colors.

background: radial-gradient(white 35%, blue 35% 70%, white 70%);

You can create interesting patterns, by manipulating these features along with the background-size and background-position properties.

background: radial-gradient(circle at 5% 50%, white 35%, blue 35% 70%, white 70%);
background-size: 50px 50px;

background: radial-gradient(at 0%, blue 50%, white 50%);
background-size: 50px 50px;

Conic-gradients

Instead of radiating from the center, conic-gradients rotate around the center (or whatever center point is specified).

 background: conic-gradient(red, green, blue);

The gradients rotates clockwise, usually from 0deg.You can specify the center point of the gradient so instead of 0deg, you may use 45deg for example.

 background: conic-gradient(from 45deg, red, green, white);

You may use phrases like from top, from left etc, or you may use percentages or other measuring units to set the beginning point of the conic gradient. This could be set horizontally and vertically.

background: conic-gradient(from 45deg at 30% 5%, red, green, white);

You can also set the start point and end points for each color.

background: conic-gradient(from 45deg at 30% 5%, red 10%, green 10% 20%, white 20% 30%, yellow 30% 40%, pink 40% 60%, black 60%);

You can also use gradients to create interesting patterns.

background: conic-gradient(from 45deg at 0% 5%, black 10%, grey 30% 40%, black 60%);
background-size: 50px 50px;

background: conic-gradient(from 45deg at 50% 55%, black 10deg, grey 30deg 40deg, black 60deg 100deg, blue 180deg);
background-size: 50px 50px;

Multiple background gradients

You can also use multiple gradients with comma (,) separating each gradient.

background: conic-gradient(from 45deg at 0% 5%, black 10%, grey 30% 40%, black 60%),
linear-gradient(to bottom, rgb(109, 16, 16) 30%, rgb(12, 12, 95) 40% 60%, rgb(10, 70, 10) 70%);

background-size: 50px 50px;
background-blend-mode: screen;

Conclusion

Gradients provide beautiful alternatives to using url() images as they are lightweight and can be easily scaled to look consistent across devices. They can also be used to create dynamic effect, such as hover states, transitions, and animations. People also use gradient backgrounds to create images or artistic effects with a single div.