Backgrounds con gradientes mediante CSS

Una forma de dar un estilo diferente a tu background que utiliza un color como fondo puede ser mediante gradientes de CSS. Con estos gradientes puedes pasar de un color a otro e indicarle la dirección, como en los siguientes ejemplos:

De Izquierda a Derecha:

/* mozila code */
background-image: -moz-linear-gradient(left, right, from(#A1D004), to(#6B9A00)); 

/* webkit code */
background-image: -webkit-gradient(linear, left top, left bottom, 

color-stop(0.00, #A1D004), color-stop(1.00, #6B9A00));

/* IE code - note GradientType=0 means vertical */
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', 

startColorstr=#A1D004, endColorstr=#6B9A00, GradientType=0);

De Arriba a Abajo:  

background-image: -moz-linear-gradient(left, right, from(#A1D004),to(#6B9A00));
background-image: -webkit-gradient(linear, left top, left bottom, 

color-stop(0.00, #A1D004), color-stop(1.00, #6B9A00)); 

/* IE code - note GradientType=1 means horizontal */
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',

startColorstr=#A1D004, endColorstr=#6B9A00, GradientType=1); 

Se puede usar en cualquier elemento HTML, aunque lo normal es asociarlo con la etiqueta BODY

By worldjam with No comments