Gradual CSS Linear Gradient.

 Create a gradual CSS linear gradient:

Applying a color on HTML elements is not limited to one flat hue. 

CSS provides the ability to use color transitions, otherwise known as gradients, on elements. 

This is accessed through the background property's linear-gradient function. Here is the general syntax:

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);

The first argument specifies the direction from which color transition starts - it can be stated as a degree, where 90deg makes a horizontal gradient (from left to right) and 45deg makes a diagonal gradient (from bottom left to top right). 

The following arguments specify the order of colors used in the gradient.

Example:

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));




Use a CSS gradient to create a striped element:

The repeating-linear-gradient()  function is very similar to linear-gradient() with the major difference that it repeats the specified gradient pattern.repeating-linear-gradient() accepts a variety of values, but for simplicity, you'll work with an angle value and color-stop values in this challenge.

The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels.

In the example demonstrated in the code editor, the gradient starts with the color yellow at 0 pixels which blends into the second color blue at 40 pixels away from the start. Since the next color stop is also at 40 pixels, the gradient immediately changes to the third color green, which itself blends into the fourth color value red as that is 80 pixels away from the beginning of the gradient.

For this example, it helps to think about the color stops as pairs where every two colors blend together.

0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px

If every two color-stop values are the same color, the blending isn't noticeable because it's between the same color, followed by a hard transition to the next color, so you end up with stripes.

The syntax for this is:

background: repeating-linear-gradient(90deg, yellow 0px,

                                blue 40px, green 40px,red 80px);