October 29, 2011 in HTML & CSS, Programming, Tutorials by admin

Ever wanted to know how to get those stunning gradient effects with just CSS? Using CSS3 we can create cross browser compatible gradients without needing any images! In the past all we had was images to get a gradient effect, but now with CSS3 we can make beautiful gradients with just a few lines of code.

These are just a few sample CSS3 gradient colors. Isn’t it neat how well they render! No more needing images for gradients in HTML.

Using only these four lines of CSS we can create perfect CSS3 gradients. First we will want to set a default background color for any olders browsers that may not be compatible with CSS3. Then we will create our gradient for Internet Explorer using the filter property and then our firefox gradient and webkit gradient. It really is that simple. Just change the Hex values in the code below to your gradient colors.

CSS
1
2
3
4
5
6
.gradient{
    background-color: #ffffff; /* for Non CSS3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#000000'); /* ie */
    background: -moz-linear-gradient(top, #f9f9f9, #000000); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#000000));/* webkit (safari chrome) */
}