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.