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 (
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:
Here's a working example:
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.
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.
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,
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 (
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%.
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: