Home/ Questions/Q 7057713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:01:19+00:00

See the gray bar in this example page: http://dss.com.bo/inicio.aspx Here is my attempt at

  • 0

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:

enter image description here

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    enter image description here

    • 0