How can I make the gradient stops in a CSS3 linear gradient?

Question

See the gray bar in this example page:

http://dss.com.bo/inicio.aspx

Here is my attempt at recreating that gradient using CSS3 - also using CSS3PIE:

#navigation {
    border: 1px solid #888888;
    border-radius: 22px;
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px;    
    height: 50px;
    font-family: Arial;    
    background: #AAAAAA;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#AAAAAA), to(#757575));
    background: -webkit-linear-gradient(#AAAAAA, #757575);
    background: -moz-linear-gradient(#AAAAAA, #757575);
    background: -ms-linear-gradient(#AAAAAA, #757575);
    background: -o-linear-gradient(#AAAAAA, #757575);
    background: linear-gradient(#AAAAAA, #757575);
    -pie-background: linear-gradient(#AAAAAA, #757575);
    behavior: url(/Public/stylesheets/PIE.htc);
}

This result in:

How can I reduce the bleeding effect, so the color transition is harder?

Answer 1

Have a white gradient fading in opacity up to 50% over your desired background color. This method can be used on any background color without changing the gradient CSS.

Demo: http://jsfiddle.net/ThinkingStiff/Zn5Qb/

CSS:

#header { 
    background-color: #595454;
    background-image: linear-gradient( 
            top, 
            rgba( 255, 255, 255, .4 ) 0%, 
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%, 
            rgba( 255, 255, 255, .0 ) 100% );
        background-image: -webkit-linear-gradient( 
            top, 
            rgba( 255, 255, 255, .4 ) 0%, 
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%, 
            rgba( 255, 255, 255, .0 ) 100% );
        background-image: -moz-linear-gradient( 
            top, 
            rgba( 255, 255, 255, .4 ) 0%, 
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%, 
            rgba( 255, 255, 255, .0 ) 100% );
        background-image: -o-linear-gradient( 
            top, 
            rgba( 255, 255, 255, .4 ) 0%, 
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%, 
            rgba( 255, 255, 255, .0 ) 100% );
        background-image: -ms-linear-gradient( 
            top, 
            rgba( 255, 255, 255, .4 ) 0%, 
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%, 
            rgba( 255, 255, 255, .0 ) 100% );
    height: 42px;
    width: 100%;
}

HTML:

<div id="header"></div>

Output: