CSS Gradients

CSS gradients were introduced in CSS 3 for the purposes of creating a gradient between two or more colors.

A CSS gradient is where one color fades gradually into another color. Actually, you can create a CSS gradient between many colors. But the main point is that, a gradient allows you to gradually fade between colors. This can give you a nice subtle effect for shading in backgrounds, buttons, and other HTML elements.

Here's an example of a CSS 3 gradient fading from White to the nice, fresh color of Chartreuse
Here's another example of a CSS gradient - a repeating radial gradient.

CSS 1 & 2 Gradients

Prior to CSS 3, in order to add a color gradient to your website, you first had to create an image, then add it as an image or background image. Although this technique can provide good results, the downside is that using an image can use up more bandwidth than is necessary, and it can be quite time consuming - especially if you need to create many different color gradients.

CSS 3 Gradients

CSS 3 allows you to create a CSS gradient without the need to create an image. No need to create a separate image and upload it every time you need a new gradient! Having said that, a CSS gradient is actually a background image. Each time you create a CSS gradient, the browser dynamically draws an image using the gradient details you provide. And that's why we use the background-image property (and other image properties) to create a CSS 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:

background: linear-gradient(red, green);

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

Linear Gradient

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

CodeResult

Linear gradient...

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:

CodeResult

Repeating linear gradient...

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:

CodeResult

Radial gradient...

Repeating Radial Gradient

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

Here's an example of a repeating radial gradient:

CodeResult

Repeating radial gradient...

More Gradients

The following pages contain more gradient examples and code:

Browser Compatibility

You might have noticed that the above examples use more than just the CSS3 gradient functions. The examples also include proprietary functions such as -webkit-linear-gradient, -moz-linear-gradient, etc. The reason I have included these extra functions is for browser compatibility. Because CSS gradients are new to CSS 3, it could take some time before the official W3C gradients are widely supported in browsers. Because of this, most developers use the proprietary gradient functions so that all/(most?) browsers will display the gradient as expected.

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo