html - Gradient that stops at a particular height and continues further with a solid color

Question

I want to have a gradient in HTML/CSS.

Assume some DIV is always more than 400px tall. I want to add the gradient so that it is #FFFFFF at the top and #EEEEEE at 300px. So the first 300px (height-wise) is a nice 'white to grey' gradient. After 300px, regardless of how tall the DIV goes, I want the background color to stay #EEEEEE.

I guess this has something to do with gradient stops (?)

How can I do it?

P.S. If it is not possible in IE I don't care. I am fine if gecko and webkit browsers show this properly.

Answer 1

background-color: #eee;
background-image:         linear-gradient(top, #fff 0%, #eee 300px); /* W3C */
background-image:    -moz-linear-gradient(top, #fff 0%, #eee 300px); /* FF3.6+ */
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 300px); /* Chrome10+,Safari5.1+ */

This is according to the current Mozilla documentation: https://developer.mozilla.org/en/CSS/-moz-linear-gradient.

I've confirmed that it works in Firefox 3.6 and Chrome 15.