CSS: Linear vertical gradient in a box

Unfortunately, you do write what you have already tried. That your gradient is not visible in all browsers, however, can have several reasons.

We must be aware, that the browser supports the corresponding properties. The property "linear-gradient" in its pure form is understood only by browsers that are compatible with CSS3. For earlier versions, you need an appropriate prefix, so that the CSS is understood, very old browsers such as Internet Explorer 6 cannot understand and translate the rules at all.

You should use the following CSS rules:

/*Firefox*/
background:-moz-linear-gradient(top, #000, #FFF);
/*Safari and Chrome*/
background:-webkit-gradient(linear, left top,
left bottom, from(#000), to(#FFF));
/*Safari and Chrome (new)*/
background:-webkit-linear-gradient(top, #000, #FFF);
/*Opera*/
background:-o-linear-gradient(top, #000, #FFF); 
/*Internet Explorer*/
background:-ms-linear-gradient(top, #000, #FFF);
/*CSS 3*/
background:linear-gradient(#000, #FFF);

First we see the CSS rules with a prefix for the browsers mentioned, then the CSS3 rule for all browsers supporting CSS3.
2012-05-14 at 19:21