CODEWITHSUNDEEP
cssbackground-imagelinear-gradients
AAA
AAA

Reputation: 3168

How to show white color after gradient ends instead of gray color?

I have the following css for background color/gradient: 

background-color: #FFFFFF;
background: -moz-linear-gradient(top,  #d7d6d2,  #f9ffff);
background-image: linear-gradient(top,  #d7d6d2,  #f9ffff);
background-image: -o-linear-gradient(top,  #d7d6d2,  #f9ffff);
background-image: -moz-linear-gradient(top,  #d7d6d2,  #f9ffff);
background-image: -webkit-linear-gradient(top,  #d7d6d2,  #f9ffff);
background-image: -ms-linear-gradient(top,  #d7d6d2,  #f9ffff);

Using this I am able to accomplish what I need but after the gradient ends there is a grayish color instead of white. What can I do so that after the gradient ends the white color starts showing?

Upvotes: 1

Views: 3976

Answers (3)

Sean
Sean

Reputation: 344

The white part of that gradient will go to the bottom of whatever element it is assigned to. My guess is you have something outside what it is assigned to that is not white.

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46795

Looking at your gradient definition, why don't you set the ending color to pure white:

background-image: linear-gradient(top,  #d7d6d2,  #ffffff);

At the moment, your ending color is so near to white #f9ffff that most people won't have sharp enough eyes to distinguish the difference.

Upvotes: 2

Kevin Lynch
Kevin Lynch

Reputation: 24723

Set the container background to white. In this case it did it with the html and body DEMO http://jsfiddle.net/kevinPHPkevin/RxXHz/

CSS

html {
    height:100%;
    background-color: #FFFFFF;
}
body {
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background-color: #FFFFFF;
    background: -moz-linear-gradient(top, #d7d6d2, #f9ffff);
    background-image: linear-gradient(top, #d7d6d2, #f9ffff);
    background-image: -o-linear-gradient(top, #d7d6d2, #f9ffff);
    background-image: -moz-linear-gradient(top, #d7d6d2, #f9ffff);
    background-image: -webkit-linear-gradient(top, #d7d6d2, #f9ffff);
    background-image: -ms-linear-gradient(top, #d7d6d2, #f9ffff);
}

Upvotes: 2

Related Questions