How can you make a gradient background without images?

Question

Like this. in general i will make 1 px wide image of this then will repeat-x.

but is it possible to make same type of background with CSS3 , if yes then tell me how tp make same of this.

alt text http://shup.com/Shup/367066/110519102044-My-Desktop.png

with all browser compatibility IE 8, 7, 6 , FF , Chrome, Safari, iphone.

Answer 1

Pretty much all of the browsers support gradients. Here's the CSS you need:

.gradient{
    /* For any browser that can't create a gradient  */
    background-color: #EFEFEF;
    /*//mozilla*/
    background: -moz-linear-gradient(top, #efefef, #FFF);
    /* Chrome/Safari     */
    background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFF));
    /*IE 6/7 */ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#EFEFEF',EndColorStr='#FFF');
    /*IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#FFF)";
}

Answer 2

Try some of the CSS gradient generators that you can find with a Google search, such as: http://gradients.glrzad.com/

or

http://www.designdetector.com/demos/css-gradients-demo-1.php

Also, take a look at Webkit's gradient tutorial: http://webkit.org/blog/175/introducing-css-gradients/

And Firefox: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

Now - that in mind: This is new stuff -- CSS3, which isn't finalized yet. Browser support for CSS3 stuff is very cutting edge. You're not going to get cross browser support for the browsers you've listed. Latest Webkit (Safari, Google Chrome) and Firefox are your best bets. IE supports filters. Opera doesn't support any kind of gradients though.