CSS Linear-Gradient Property

In a linear gradient background, the colors gradually transition from one to the other either vertically, horizontally, or at an angle. The linear-gradient property in CSS controls how this type of gradient is displayed as the background. The syntax for linear-gradient is as follows:

background: linear-gradient(<arguments>); OR background-image: linear-gradient(<arguments>);

<arguments> are variables that specify what the linear gradient would exactly look like. There are several types of arguments for linear-gradient, including color, direction, and color stop location. Below are examples that illustrate commonly-used arguments:

Example 1: Simple linear gradient

CSS Declaration

background: linear-gradient (red,yellow);

Result:

This is the most simple way of specifying a linear gradient. With two colors and no other arguments, the browser will set the background color at the top to the first color specified (in this case red), set the background color at the bottom to the second color specified (in this case yellow), and apply a linear gradient between the top and the bottom.

Example 2: Specify direction

CSS Declaration

background: linear-gradient (to left,red,yellow);

Result:

When we use the "to <direction>" argument, we are telling the browser what direction the gradient should flow. In Example 2, the background color starts out as red (the first color specified) on the right, and then gradually shits to yellow (the second color specified) towards left.

Example 3: Specify angle

CSS Declaration

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

Result:

When we specify an angle, the direction of the linear gradient is shifted by that angle.

Example 4: Multiple color stops

CSS Declaration

background: linear-gradient (red, 33%, yellow, 66%, green);

Result:

In Example 4, we specified a color, a percentage, a second color, a second percentage, and a third color. The two percentage values are where the color stops occur. Three distinct background segments result from this CSS declaration:

1. From the top edge of the element to 33% of the way down, the background color is red.
2. From 33% below the top to 66% below the top, the background color shifts from red to yellow (with yellow appearing at the midpoint) and then from yellow to green.
3. From 66% below the top to the bottom of the element, the background color is green.

One thing to note above is that only a single background color exists in the first segment as well as in the third segment. This illustrates that linear-gradient can also be used to set part of the background to a single color.