How to create a gradient background using CSS3 without image

You can use gradient as a background and you dont need to create an image by Photoshop. Just CSS3 is enough to create gradient background. CSS gradient is supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.

For Webkit Browsers (Safari, Chrome)

The following line of code will display a linear gradient from top (#eee) to bottom (#ccc). The stylesheet code is written below-

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

Here STARTING POINT of the gradient is left top , ending point is left bottom

For Firefox 3.6+
background: -moz-linear-gradient(top,  #eee,  #ccc);

The following filter for Internet Explorer :
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eeeeee’, endColorstr=’#cccccc’);

To know more about Internet Explorer Gradient Creation Visit This Link , Also view this link in IE5.5 or Later


A Good article on Opera Browser Gradients


W3C Guide : A very good CSS3 Reference on Linear Gradients and Image Replacement Techniques


CSS Recommendations by W3C



1) A Good reference on CSS gradients :

2) CSS Dropdown menus with gradient background

3) Good tutorial on CSS background by Mozilla

4) Another CSS Gradient tutorial


Get top ranking in Google search > Guaranteed SEO > SEO Blog > Portfolio page