gradient

How to Use CSS3 Gradients for Various Browsers

Gradients have constantly been used for many years in web design, mainly with the help of using gradient image backgrounds. Lately however, with the implementation of CSS3 to numerous current browsers, many web designers are able to render gradients without the use of images and instead allow browsers to render them quickly and much more efficiently.

However, due to certain limitations and implementation of CSS3, many (older) browsers cannot render CSS3 gradients at all and many designers would still have to fall back to using images for the sake of design. But as browsers are becoming more compliant to W3C standards, we are able to use creative techniques such ass CSS3 gradients for some of our designs.

Here, I’ll show you various ways (using current browsers) to implement gradients on the fly without the use of images. But before, I go any further, however, there are slight differences between the syntax of various browsers.

 FIREFOX 3.6+

background-image: -moz-linear-gradient(top, #9dd3f7, #095586);

 SAFARI 5.1+/CHROME 10+

background-image: -webkit-linear-gradient(top, #9dd3f7, #095586);

 IE 10+

background-image: -ms-linear-gradient(top, #9dd3f7, #095586);

 OPERA 11.10+

background-image: -o-linear-gradient(top, #9dd3f7, #095586);

 

Here’s the breakdown of how the syntax works:

css3 linear gradient information

css3 gradient demo

 

As you can see, the syntax for most modern browsers today are very similar. However, for older browsers that don’t support gradients, you should always have a fallback. The best way (of course) is to declare a background image url as well as a background color just in case the image url is smaller than that of the background div.

A More Compliant and Condensed Version

Below is an example of the code:

.background {
      background-color: #5596c0; /* fallback for older browsers */
      background-image: url('images/my_gradient_bg.jpg'); /* fallback background image */
      background-image: -moz-linear-gradient(top, #095586, #9dd3f7);
      background-image: -webkit-linear-gradient(top, #095586, #9dd3f7);
      background-image: -ms-linear-gradient(top, #095586, #9dd3f7);
      background-image: -o-linear-gradient(top, #095586, #9dd3f7);
}

Doing this allows most browsers to render a background color even if it cannot render a gradient background.

Gradient Stops and Radial Gradients

There are, however, other variations to using CSS3 gradients. There are also gradient stops and radial gradients as well. Gradient stops allow more than two colors to be used. In which case, you can also have as many stops as you want. Below is an example of using three colors.

Gradient Stop

background-image: -moz-linear-gradient(left, #0023fa, #00ca13 50%,  #d90000);

css3 gradient stop demo

You can also add more stops. The example below shows colors at even intervals:

background-image: -moz-linear-gradient(left, blue, green, yellow, red);

css3 gradient stop four colors demo

 

Radial Gradients

Radial gradients on the other hand are a bit more complicated. There are many different properties that you can choose within the syntax. Let’s look at the code below on a 200×200 pixel div .

background-image: -moz-radial-gradient(75px 50px, circle closest-side, blue 0%, yellow 100%);

css3 radial gradient demo

Let’s break it down:

css3 radial gradient information

 

 

Here is the descriptions for the radial extend values:

closest-side
The gradient’s shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).

closest-corner
The gradient’s shape is sized so it exactly meets the closest corner of the box from its center.

farthest-side
The gradient’s shape is sized so it exactly meets the closest corner of the box from its center.

farthest-corner
The gradient’s shape is sized so it exactly meets the closest corner of the box from its center.

 

Conclusion

As you can see, using CSS3 gradients is a great way to help speed up loading times without the extra HTTP requests for background images and also a much more efficient and easy way to create gradients without the use of illustration software. As more and more browsers become standardized and compliant, you will see more applications of CSS3 gradients being used on websites as the years come by.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>