CSS Gradients

A gradient is where one color fades gradually into another color. This can give you a nice subtle effect for shading in backgrounds, buttons, and other HTML elements.

Here's an example of a linear gradient.

Here's an example of a repeating radial gradient.

How to Create a CSS Gradient

To create a CSS gradient, you simply use any property that supports an image — gradients can be used in any property that accepts images.

The syntax for gradients consists of a CSS image property (say for example, background-image), combined with a gradient function. There are four gradient functions: linear-gradient, radial-gradient, repeating-linear-gradient, and repeating-linear-gradient. As with any function, the gradient functions accept parameters (which determine how the gradient will look).

Here's an example of the code used to create a basic linear gradient:

That's the basic code, however, you do have a number of options as to how your gradient is presented. For example, you can change the position of the gradient, the number of colors, the color stops, and more.

Below are some examples of the different types of gradients you can create using CSS.

Linear Gradient

You can create linear gradients or radial gradients. Here's an example of a linear gradient:

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

Repeating Linear Gradient

You can also create repeating gradients in CSS. Repeating gradients is where you set up a gradient that's smaller than its box, then make it repeat all the way to the edge of the box. Here's an example of a repeating linear gradient:

<style>
#example3 {
	height:100px;
	border:1px solid black;
	padding:10px;
	background: lightyellow repeating-linear-gradient(to right, lightyellow, gold 20px, lightyellow 40px);
	}
</style>

<div id="example3">Repeating linear gradient...</div>

Radial Gradient

A radial gradient is a gradient where the colors gradually emerge from a single point and smoothly spread outward in a circular or elliptical shape.

Here's an example of a radial gradient:

<style>
#example2 {
	height:100px;
	border:1px solid black;
	padding:10px;
	background: gold radial-gradient(lightyellow, gold);
	}
</style>

<div id="example2">Radial gradient...</div>

Repeating Radial Gradient

As with the repeating linear gradients, you can create repeating radial gradients.

Here's an example of a repeating radial gradient:

<style>
#example4 {
	height:100px;
	border:1px solid black;
	padding:10px;
	background: gold repeating-radial-gradient(lightyellow, gold 20px, lightyellow 40px);
	}
</style>

<div id="example4">Repeating radial gradient...</div>

More Gradients

The following pages contain more gradient examples and code:

Web.QHMIT.com