Cross-Browser Gradient Effect Using CSS

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 8 Comments

Many themes, be it blogger or WP, make use of gradient effects. About 95% of them, use an image to achieve the gradient effect. However, the same can be realized with CSS. In this tutorial, we'll let you know how to achieve this gradient effect on all major browsers - IE, Firefox 3.6+, Safari, Chrome and Opera. So, let's get started...

If you are a WordPress user, then you need to add the following CSS mentioned in the tutorial to your ".css file" and upload the same to your server. If you are blogspot user, then you need to add the following CSS codes just above the following code in your template - ]]></b:skin>. 

FOR WEBKIT BROWSERS

To realize the gradient effect on webkit browsers like Safari, Chrome, etc... just include the following line in the CSS part of your theme.

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

FOR FIREFOX 3.6+

To visualize the gradient effect on Firefox, add the following piece of code in the CSS part of your template.

background: -moz-linear-gradient(top, #ccc, #000);

FOR INTERNET EXPLORER

Use the following code to enable the gradient effect on IE.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

Note: You may change the color codes highlighted in green and blue as per your choice. The codes which are highlighted in green represent the starting color in the gradient effect while the code highlighted in blue represents the ending color. I suggest you to take a look at the following link to easily pick the color code of your choice - HTML Color Codes Generator.

To see the effect on all the browsers, simply combine the above mentioned codes. So, you'll have a browser compatible CSS gradient effect. However, I strongly suggest you to provide a simple color as a background in case the user is using a browser that does not support CSS3. Hence, your final code should be similar to the one shown below.

background: #ccc; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */

If you feel the above the post is too complex to understand, then I suggest you to visit this link -  Ultimate CSS Gradient Generator and choose the gradient effect of your choice for different colors. Once you make a choice at the left, you can preview the same at the right. Moreover, the required CSS to be inserted in your theme will also be generated. So, just copy that & insert it in your template. That's it!

Why gradient effect using CSS? Simple! No external HTTP requests - increases the loading speed of your web page on all browsers... I recommend you to read the following articles to know more about page speed of your blog - Speed Up Your Blog - Tips And Tools, How To Speed Up Your Blogger Blog? and Using CSS Sprites On Blogger - Introduction. Share your opinions about the article via comments!

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• CSS Tricks