The linear-gradient function

The linear-gradient function specifies a linear gradient. It applies to properties that specify a background image: background, background-image or border image: border-image, background-image-source.

Syntax

selector {
	background: linear-gradient([angle or direction], color1 length1, color2 length2...);
}

Values

Value	Description
direction	Sets a specific gradient direction in any angle units or with the `top`, `left`, `right`, `bottom` keywords or their combination: `top left`, `top right` and so on. The order of the words is not important: you can write `top left` and `left top`, there is no difference. The parameter is optional: if you do not write it, the gradient will go from top to bottom (as with `to top`). The direction is preceded by the word `to`.
angle	An angle in any angle units. Can be positive or negative. The parameter is optional. Either the angle or the direction (or nothing at all) can be specified at the same time.
color1	The starting color of the gradient in any color units.
color2	The ending color of the gradient in any color units.
length	Sets the extent of a specific gradient color in any size units.

Example . The simplest option

Syntax:

selector {
	background: linear-gradient(starting color, ending color);
}

Let's look at an example:

<div id="elem"></div>

#elem {
	background: linear-gradient(black, red);
	width: 200px;
	height: 200px;
}

Example . Let's add an angle

Syntax:

selector {
	background: linear-gradient(angle, starting color, ending color);
}

Let's look at an example:

<div id="elem"></div>

#elem {
	background: linear-gradient(45deg, black, red);
	width: 200px;
	height: 200px;
}

Example . Let's add a direction

Instead of an angle, you can add the top, left, right, bottom direction, or a combination of them: top left, top right. The direction is preceded by the to word.

Syntax:

selector {
	background: linear-gradient(direction, starting color, ending color);
}

Let's look at an example:

<div id="elem"></div>

#elem {
	background: linear-gradient(to left, black, red);
	width: 200px;
	height: 200px;
}

Example . Let's add a direction

Let's point another direction:

<div id="elem"></div>

#elem {
	background: linear-gradient(to top left, black, red);
	width: 200px;
	height: 200px;
}

Example . Let's add a length

Syntax:

selector {
	background: linear-gradient(color1 length1, color2 length2);
}

In the following example the behavior will be as follows: pure red will be from 0px to 30px, from 30px to 50px there will be a gradient from red to blue, and from 50px to the end - pure blue:

<div id="elem"></div>

#elem {
	background: linear-gradient(red 30px, blue 50px);
	width: 200px;
	height: 200px;
}

Example . Let's add more than `2` colors

Syntax:

selector {
	background: linear-gradient(color1 length1, color2 length2, color3 length3...);
}

In the following example the behavior will be as follows: pure red will be from 0px to 30px, from 30px to 50px there will be a gradient from red to blue, and from 50px to 70px - a gradient from blue to green, and after 70px - pure green:

<div id="elem"></div>

#elem {
	background: linear-gradient(red 30px, blue 50px, green 70px);
	width: 200px;
	height: 200px;
}

Example . Sharp transitions

In the following example, the behavior will be as follows: pure red will be from 0px to 30px, pure blue - from 30px to 60px, pure green - after 60px (you don’t have to write red 0px):

<div id="elem"></div>

#elem {
	background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
	width: 200px;
	height: 200px;
}

Example . Length can also be specified as percentages

In the following example, the behavior will be as follows: pure red will be from 0% to 30%, pure blue - from 30% to 60%, pure green - after 60% (you don’t have to write red 0%):

<div id="elem"></div>

#elem {
	background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
	width: 200px;
	height: 200px;
}

Example . Combination with background-size

In the following example, the behavior will be as follows: pure red will be from 0px to 30px, pure blue - from 30px to 60px, and all this will be repeated in 60px section (due to background-size: 60px;):

<div id="elem"></div>

#elem {
	background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
	background-size: 60px 60px;
	width: 200px;
	height: 200px;
}

The linear-gradient function

Syntax

Values

Example . The simplest option

Example . Let's add an angle

Example . Let's add a direction

Example . Let's add a direction

Example . Let's add a length

Example . Let's add more than 2 colors

Example . Sharp transitions

Example . Length can also be specified as percentages

Example . Combination with background-size

See also

Example . Let's add more than `2` colors