CSS Linear Gradients

A linear gradient is where colors gradually blend into other colors across a linear line. This is in contrast to a radial gradient, where the colors emerge from a single point and smoothly spread outward in a circular or elliptical shape.

To create a gradient in CSS, use the background-image property (or the background shorthand property) along with the linear-gradient() function as a value.

Below are examples of linear gradients. These use standard CSS to create the gradient.

Basic Linear Gradient

This example demonstrates what a basic linear gradient looks like. Here, we've specified two colors (red and gold), and we've specified that the gradient should run from the bottom to the top of the box.

The gradient code looks like this:

background: linear-gradient(to top, red, gold);

Here's a working example:

Angle Gradient

You can specify your gradients to run at an angle. Simply provide the angle in your code:

Corner to Corner Gradient

In this example, we specify a particular corner for the gradient to begin. This example also introduces a third color to the gradient. This makes it easier to see the colors blend together.

Rainbow Gradient

Here, we add many colors to give our gradient that "rainbow" look. Seeing as the colors of the rainbow are red, orange, yellow, green, blue, indigo, violet, these are the colors we specify in the gradient.

Color Stops

You can specify the exact location of each color stop. A color stop is a point in the gradient that has the specified color value. To specify the location of a color stop, you simply add the location as a percentage value (eg, 20%) or a length value (eg, 20px).

In this example, we also start the gradient from the bottom of the box. Therefore, the first color stop will be located 10 pixels from the bottom (i.e. 10px), and the second color stop is 90 pixels (90px).

Negative Color Stops

You can also provide a negative value for a color stop. This example uses the same colors as the above example, however, the first color stop is specified as a negative. Therefore, it is located outside of the actual box. Because we didn't specify the location of the 2nd color stop, its location is at 100%.

Repeating Gradients

You can use the repeating-linear-gradient function to make the gradient repeat multiple times across the element.

You can create a sharp transition between colors by having a different start and end color. Like this:

Here's another example:

And we can also make it smooth again by ensuring the end color is the same as the start color: