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:

Here's a working example:

<style>
#basic {
	height:100px;
	border:1px solid black;
	padding:10px;
	background: linear-gradient(to top, red, gold);
	}
</style>

<div id="basic">Linear gradient...</div>

Angle Gradient

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

<style>
#angle {
	height:100px;
	border:1px solid black;
	padding:10px;
	background: linear-gradient(45deg, red, gold);
	}
</style>

<!-- BEGIN HTML -->
<div id="angle">Angled linear gradient...</div>
<!-- END HTML -->

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.

<style>
#corner-to-corner {
	height:100px;
	border:1px solid black;
	padding:10px;
	background: linear-gradient(to top right, lime, white, gold);
	}
</style>

<div id="corner-to-corner">Corner to corner linear gradient...</div>

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.

<style>
#rainbow {
	height:100px;
	border:1px solid black;
	padding:10px;
	background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
	}
</style>

<div id="rainbow">Rainbow linear gradient...</div>

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).

<style>
#color-stop {
	height:100px;
	border:1px solid black;
	padding:10px;
	background: linear-gradient(to top, indigo 10px, violet 90px);
	}
</style>

<div id="color-stop">Linear gradient with color stops...</div>

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%.

<style>
#negative-color-stop {
	height:100px;
	border:1px solid black;
	padding:10px;
	background: linear-gradient(to top, indigo -50px, violet);
	}
</style>

<div id="negative-color-stop">Negative color stop...</div>

Repeating Gradients

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

<style>
#repeating-gradient {
	height:100px;
	border:1px solid black;
	padding:15px;
	color:white;
	background: repeating-linear-gradient(to top, indigo, violet 10%, indigo 20%);
	}
</style>

<div id="repeating-gradient">Repeating gradient...</div>

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

<style>
#repeating-gradient2 {
	height:100px;
	border:1px solid black;
	padding:15px;
	background: repeating-linear-gradient(to top, khaki 15%, lightyellow 30%);
	}
</style>

<div id="repeating-gradient2">Repeating gradient 2...</div>

Here's another example:

<style>
#repeating-gradient3 {
	height:100px;
	border:1px solid black;
	padding:15px;
	background: repeating-linear-gradient(45deg, khaki 15%, lightyellow 40%);
	}
</style>

<div id="repeating-gradient3">Repeating gradient 3...</div>

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

<style>
#repeating-gradient4 {
	height:100px;
	border:1px solid black;
	padding:15px;
	background: lightyellow;
	background: repeating-linear-gradient(45deg, lightyellow, khaki 15%, lightyellow 40%);
	}
</style>

<div id="repeating-gradient4">Repeating gradient 4...</div>

Web.QHMIT.com