Question

I have this class set for a page I’m testing (just starting to try to implement CSS3 so go easy on me).

.CSS3TESTDIV{
    width:228px;
    height:300px;
    background-color: #fff3;
    background-image: -moz-linear-gradient(0% 100% 90deg, #0068b3, #fff);
        background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#fff), to(#0068b3)); 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border: 1px solid #0068b3; 
    padding: 10px;
    margin:0 10px 0 0;
    -moz-box-shadow: 7px 7px 7px #888;  
    -webkid-box-shadow: 7px 7px 7px #888;
    box-shadow: 7px 7x 7px #888;
    float:left;         
}

Everything looks good in FF on PC and Mac, I know that IE does not support this.

My question is about the gradient: From what I have above the gradient is fairly smooth, but I just want a little of the blue to creep up from the bottom, not fade up as high as i see it on my browser. I have played with the percentages and values, but I can’t really seem to make it the way I want.

How can i get the effect im looking for?

Again, i want mostly white from top to bottom, and just a little of the blue at the bottom fading up. thanks

Answer 1

You want to use color stops.

So set the first color at 0%, second at 90%, and 3rd at 100% (which will be the blue).

You can use this tool to get your desired effect http://gradients.glrzad.com/

Make sure you add a 3rd color though and position it at 90%.

Cheers,

Marko