How do I "stop" a gradient from flowing further down the page? - css

Question

I think the easiest way to explain is simply linking to an example of what I want:
http://macrumors.com
At the top there's a small blue gradient that doesn't stretch very far.
I want to replicate this, but the only way I know how to do gradients in CSS3 is from top to bottom of the page, not stopping midway through. I looked around and couldn't really find anything, though I did see color-stop property, but I'm not sure if that's what I'm looking for.
Could anyone give me a hand?

Answer 1

#test {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #e2e2e2 10px); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100px,#e2e2e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#e2e2e2 100px); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#e2e2e2 100px); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#e2e2e2 100px); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#e2e2e2 100px); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
​}​
I have no idea what blue and hight is used on that background image, but you can easily insert in into code pasted above. Demo: http://jsfiddle.net/xyn4f/
You should also check online gradient generators. I used that one to generate the code.