Create Gradients with CSS 3

Gradients are a favorite effect of graphic designers everywhere because gradients create a smooth transition of color. Adding gradients to the background of a web page or to sections within a page adds richness and depth to a design.

In the figure, you can see the difference between a radial and a linear gradient.


In previous versions of CSS, if you wanted to use a gradient in the background of an element, such as a <div> tag, you had to use an image. If you were clever, you created a 1-pixel-wide graphic that was as tall as you wanted the gradient and then inserted it as a background so that it repeated to fill the space. If you designed a background image well, the image file size could be small but the limitations many.

For example, you had to make the gradient as tall or taller than the space you wanted to fill, which limited your ability to create flexible page designs. Similarly, matching a second background image behind the gradient, if a design had this type of image, was no simple task. In short, adding gradients to page designs was possible, but also a true hassle.

Enter CSS 3 and designers everywhere can celebrate the new gradient options to solve all those old problems at once. Gradients generated with CSS 3 download faster and automatically adjust to fill the space perfectly.

CSS 3 gradients can be designed as linear, or radial, and you can apply different bands of color at different spacing along the continuum. All in all, CSS 3 gradients can be used in most situations where a designer would want to use one and are a significant improvement to CSS.

When you add a gradient to a background — whether it’s the background of the entire page or an element within a page, such as a <div> tag — the gradient automatically adjusts to fill the entire space unless you specify a size. Gradients can also be used in the border of elements and to fill the center of a bullet in an unordered list.

Here's the simplest syntax for creating a linear gradient in CSS 3 for WebKit browsers:

-webkit-gradient( linear, <point1>, <point2>, from(<color>), to(<color>) );

Radial gradients are created this way:

-webkit-gradient( radial, <point>, <radius>, <point>, <radius>[, <stop>]* ) <color>;

Here are two examples of gradients used as a background image:

  • The following code creates a linear gradient with two colors:

    background-image: -webkit-gradient(
        left bottom,
        left top,
        color-stop(0.32, #FFFFFF),
        color-stop(0.66, #245FAB)
  • This code example creates a radial gradient with multiple colors:

background: -webkit-radial-gradient( radial, center center, 0, center center, 70.5, from(green), to(yellow));

Here’s the code used to create the gradient in the background areas of the body, headings, and asides in the Jelly Rancher website shown in the figure.

body { background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, blue),color-stop(.25, #98fc45),color-stop(1, transparent)); }

In the example, you can see that a linear gradient was created that starts at the top and moves to the bottom. You can vary the gradient by starting it at the upper left corner and ending at the lower right corner, which would form the gradient along a diagonal path. There are also several color stops shown in the example, each of which represents a color along the gradient. The gradient example progresses as follows:

  • Start with the color blue: color-stop(0, blue).

  • Change into the hexadecimal color #98fc45 at 25 percent: color-stop(.25, #98fc45).

  • Then #98fc45 becomes transparent through the rest of the gradient until the background is completely transparent: color-stop(1, transparent).

blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.