Can you create gradients that fade to opacity using CSS or JavaScript?
Yes
for the colors, use rgba(x, y, z, o) where o is the opacity
should work
e.g.
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));Edit:For the final value (opacity) 1 is opaque & 0 is transparent
Yup, rgba(red, green, blue, alpha) is what you should use http://www.w3.org/TR/css3-color/#rgba-color, example (Try it out on jsFiddle):
/* Webkit */background: -webkit-gradient( linear, left bottom, left top, color-stop(1, rgba(0,0,0,0.0)), /* Top */ color-stop(0, rgba(0,0,0,1.0)) /* Bottom */);/* Gecko */background: -moz-linear-gradient( center bottom, rgba(0,0,0,1.0) 0%, /* Bottom */ rgba(0,0,0,0.0) 100% /* Top */);
not tested, but this should work (in FF this works (with a different syntax) - i'm not sure if safari/webkit knows rgba):
-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(0,0,0,0)));