Gradients

[Jeager]

Using the gradient generator from http://www.colorzilla.com/gradient-editor/

However when I copy the css and add it to my body, it turns the entire background white.

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(14%,rgba(255,255,255,1)), color-stop(30%,rgba(255,255,255,0.71)), color-stop(40%,rgba(255,255,255,0.53)), color-stop(44%,rgba(255,255,255,0.46)), color-stop(57%,rgba(255,255,255,0.28)), color-stop(70%,rgba(255,255,255,0.14)), color-stop(86%,rgba(255,255,255,0.02)), color-stop(100%,rgba(255,255,255,0)));

Thats the (obviously) webkit version. Its a simple white to transparent, but when applied, it just makes it all white. Any ideas?

[TheDoc]

Can you show us where you are using it? Working fine for me:
http://jsfiddle.net/DeBua/

[Jeager]

Cant give you a link atm, going to a meeting shortly, but in your example you used a different gradient, though I did plug mine into and made a black background and it did work. However, it still fails to work in actual use.

body {

line-height: 1;

font-size:62.5%;

background:url(../images/background_gradient.png) repeat-x #5cbc04

-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(14%,rgba(255,255,255,1)), color-stop(30%,rgba(255,255,255,0.71)), color-stop(40%,rgba(255,255,255,0.53)), color-stop(44%,rgba(255,255,255,0.46)), color-stop(57%,rgba(255,255,255,0.28)), color-stop(70%,rgba(255,255,255,0.14)), color-stop(86%,rgba(255,255,255,0.02)), color-stop(100%,rgba(255,255,255,0)));

font-family: Arial, Helvetica, sans-serif;

}

As is right now, the background needs to be the solid green (5cbc04) and then the gradient needs to be at the top, going down, as white. I guess I could make the gradient white to green, however I figured it would be better if I made it white transparent with a background that the main and backup backgrounds would use.

[chrisburton]

That’s the old gradient code I believe for older versions of webkit. @TheDoc has the new markup correct in his fiddle.

[TheDoc]

So you want it to go:

Green > White > Transparent?
http://jsfiddle.net/DeBua/11/

[Jeager]

No no, White to green. The way I wanted to use it was have the green be the normal default background, then the white to transparent over top of it. I can go white to green for the gradient and would be fine, was just trying something different, so if the user couldnt load a css3 gradient, the green background would still load, then a background image of a white > transparent would load up top.

http://people.ysu.edu/~jtpenezich is the site. Currently the white gradient is a image, and the green background is css.

But as for now, this is pretty much solved. Thanks for the help, I realized what I was doing wrong. Basically adding fallbacks instead of multiple.

[Author]

Posts