In a linear gradient, the colors flow in a single direction, for example from left to right, top to bottom, or any angle you choose.

A gradient with Two colour stops
A linear gradient with two color stops


To create a linear gradient you must define at least two color stops. They are the colors the transitions are created among. It is declared on either the background or background-image properties.

background: linear-gradient(direction, colour-stop1, colour-stop2, ...);

If no direction is specified, the default transition is top to bottom.


Top to bottom:

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

Left To right:

To make it left to right, you add an additional parameter at the beginning of the linear-gradient() starting with the word to which indicates the direction:

background: linear-gradient(to right, red , yellow);
Left to Right

Diagonal gradients:

You can also transition a gradient diagonally by specifying the horizontal and vertical starting positions, for example, top-left, or bottom-right.

Here’s a sample for a gradient starting from the top-left:

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

Using angles to specify the direction of the gradient

You can also use angles, to be more accurate in specifying the direction of the gradient:

background: linear-gradient(angle, colour-stop1, colour-stop2);

The angle is specified as an angle between a horizontal line and the gradient line.

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

Using more than two colors

You’re not limited to just two colors – you can use as many comma separated colors as you want.

background: linear-gradient(red, yellow, green); 
A gradient with 3 colour stops

You can also use other color syntaxes like RGB or hex codes to specify the colors.

Hard color stops

You can not only use gradients to transition with fading colors, but you can also use it to change from one solid color to another solid color instantly:

background: linear-gradient(to right,red 15%, yellow 15%);
Hard colour stops

More information: