CSS linear gradient

A gradient is filling the selected area with a sequence of color shades with smooth transitions between them. A gradient is used to display a smooth transition between two or more of the specified color shades. Gradient example:

Previously, background images were used to create a gradient effect. You can now use CSS3 to create a gradient background. Elements with CSS3 gradients look better when zoomed in than their counterparts-connected background images, since the gradient is generated by the browser directly below the specified area.

Note that the CSS gradient is the background image created by the browser, not the background color, so it is defined as the value of the background-image property. This means that the gradient can be specified not only as the value of the background-image property, but also wherever you can insert a background image, for example, in the CSS properties list-style-image and background.

CSS defines two types of gradients:

Linear gradient (goes down/up/left/right/diagonally) is a smooth transition from color to color in a straight line.
Radial gradient (defined by their center) is a smooth transition from color to color from one point to all directions.

CSS linear gradient

A linear gradient spreads in a straight line, demonstrating a smooth transition from one shade of color to another. A linear gradient is created using the
linear-gradient() function. The function creates an image, which is a linear gradient between the specified shades of colors. The size of the gradient corresponds to the size of the element to which it is applied.

The function linear-gradient() takes the following, comma-separated arguments:

The first argument indicates the degree of the angle or keywords that determine the angle of the gradient line direction. Optional argument.
A comma-separated list consisting of two or more colors, each of which can be followed by a stop position.

The simplest linear gradient requires only two arguments that define the starting and ending color:

div {
  background-image: linear-gradient(black, white);
  width: 200px;
  height: 200px;
}

Try it »

When passing a function of two arguments, a vertical gradient with a starting point from the top is set.

The direction of the gradient line can be defined in two ways:

Using degrees: As the first argument, you can pass the degree of the angle of the gradient line that defines the direction of the gradient, so for example, the 0deg angle defines the gradient line from the bottom of the element to the top, the angle of the 90deg determines the gradient line from the left to the right, etc. Simply put, the positive angles represent a clockwise rotation, negative respectively against the clock.
Use keywords: The first argument can also be the keywords to top, to right, to bottom or to left, they are the angles of gradient lines 0deg, 90deg, 180deg and 270deg respectively.

The angle can also be set using two keywords, for example, to top right this gradient line is directed to the upper right corner.

An example of a gradient given in different directions:

div { 
  margin: 10px;
  width: 200px;
  height: 200px;
  float: left;
}
#one { background-image: linear-gradient(to left, black, red); }
#two { background-image: linear-gradient(to top left, black, red); }
#three { background-image: linear-gradient(65deg, black, yellow); }

Try it »

As already mentioned, a linear gradient can include a list of more than two colors, separated by a comma, the browser will evenly distribute them across the available area:

div { 
  margin: 10px;
  width: 200px;
  height: 200px;
  float: left;
}
#one { background-image: linear-gradient(to right, red, blue, yellow); }
#two { background-image: linear-gradient(to top left, blue, white, blue); }

Try it »

After the color is allowed to specify a stop position for it, which determines the location of the color (where one color begins to move to another) relative to the start and end point of the gradient. The stop position is specified using the units of measure supported in CSS or by using percentages. When you use percentages, the position of stop positions is calculated based on the length of the gradient line. A value of 0% is the starting point of the gradient, 100% is the end point.

div { 
  margin: 10px;
  width: 200px;
  height: 200px;
  float: left;
}
#one { background-image: linear-gradient(to top right, blue, white 70%, blue); }
#two { background-image: linear-gradient(to right bottom, yellow 10%, white, red, black 90%);}
#three { background-image: linear-gradient(to right, black 10%, yellow, black 90%); }

Try it »

The color value can be specified in various ways, for example: specify the color name, use hexadecimal (HEX) or RGB (RGBA) values.

RGBA, unlike RGB, adds another number that describes the color transparency, the value can range from 0 (fully transparent) to 1 (completely opaque). A value of 0.5 makes the color translucent. The letter A in RGBA stands for the alpha channel, which is a term from graphic design meaning transparency.

To create a gradient with a transition effect from solid color to full transparency, use the RGBA syntax:

div { 
  margin: 10px;
  width: 300px;
  height: 100px;
  background-color: green;
}
#one { background: linear-gradient(to left, rgb(255,255,0), rgba(255,255,0,0)); }
#two { background: linear-gradient(rgb(255,255,255), rgba(255,255,255,0)); }

Try it »