📖 CSS3 Gradients

There are two varieties of gradients in CSS3. You can have linear or radial gradients. Linear gradients are line-based and radial are circle-based in terms of the way they are formed.

Linear Gradients

These can be set to follow almost any linear path but must have at least two color stops to produce a smooth transition from one color to another. The syntax for a linear gradient is this.

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

In use, a linear gradient that moves on a horizontal line from green to red would be coded like this.

background-image: linear-gradient(to right, green, red);

Applied to a page div to make the background gradient appear behind the div contents.

<div>Div Contents</div>
div {
	background-image: linear-gradient(to right, green, red);
	width: 200px;
	height: 100px;
}
Div Contents

You can also use multiple colors, create the gradient on an angle and make the gradient pattern repeat.

<div>Div Contents</div>
div {
	background-image: repeating-linear-gradient(45deg, blue, green 10%, yellow 10%);
	width: 200px;
	height: 100px;
}
Div Contents

Radial Gradients

These gradients are circular in design and use a similar syntax.

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Creating a basic radial gradient with the same green and red colors would look like this.

background-image: radial-gradient(red, green);

You can further enhance your radial gradient using shape, size, position and repeat.

background-image: repeating-radial-gradient(circle, red, yellow 10%, green 15%);
Div Contents

You might even think of some better applications like creating custom bullets.

<h2><span id="bullet"> </span>This Text Needs a Bullet</h2>
#bullet {
	height: 16px;
	width: 16px;
	border-radius: 90px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
	background-color: green; /* For browsers that do not support gradients */
	background-image: radial-gradient(circle at top left, white, green 15%); /* Standard syntax (must be last) */
}

 This Text Needs a Bullet

Try out more gradients at W3 Schools.

Also, don't miss the gradient tricks at css-tricks.