¿Se pueden crear degradados que se desvanezcan en opacidad con CSS o JavaScript?

Question

WebKit ha introducido la capacidad de crear degradados de CSS. Por ejemplo, con el siguiente código:

-webkit-gradient(linear, left top, left bottom, from(#fff), to(#000)); 

Sin embargo, ¿es posible tener un degradado de opacidad con CSS? Quiero que el degradado sea de un solo color en un lado y difuminado a cero en el otro.

La compatibilidad entre navegadores no es importante; Solo necesito que funcione en Google Chrome.

¿Hay alguna forma de hacerlo con CSS? Si no, ¿se puede hacer algo similar usando JavaScript (no jQuery)?

Gracias por su ayuda.

Answer 1

Sí

para el colores, el uso RGBA (x, y, z, o) donde o es la opacidad

debería funcionar

por ejemplo,

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0))); 

Editar: Para el valor final (opacidad) 1 es opaca & 0 es transparente

Answer 2

no probado, pero esto debería funcionar (en FF esto funciona (con una sintaxis diferente) - no estoy seguro de si Safari/WebKit sabe RGBA):

-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(0,0,0,0))); 

Answer 3

Sí, rgba(red, green, blue, alpha) es lo que debes usar http://www.w3.org/TR/css3-color/#rgba-color, ejemplo (Pruébelo en):

/* 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 */ 
);