Otra interesante opcion que nos da CSS3 es de crear degradados de forma muy sencilla para ya no tener que recurrir a imágenes de fondo como usualmente se hace.
Veamos primero la forma más simple:
[cc lang=»css»]
background: -moz-linear-gradient(top, #65b6cf , #2c2c2c);
[/cc]
Este ejemplo crea un degradado que empieza arriba partiendo del color #65b6cf hasta terminar en #2c2c2c
Veamos algo un poco más complicado esta vez vamos a definir la longitud del degradado
[cc lang=»css»]
background: -moz-linear-gradient(top, #65b6cf , #2c2c2c 50px);
[/cc]
También es posible usar varios colores en nuestro degradado
[cc lang=»css»]
background: -moz-linear-gradient(top, #65b6cf , #2c2c2c 25%, #fff 80%);
[/cc]
Existe otra opción muy parecida para crear degrados radiales
[cc lang=»css»]
background: -moz-radial-gradient(50%, #65b6cf , #2c2c2c);
[/cc]
Todo eso funciona en firefox, para hacerlo funcionar en Webkit la forma es un poco distinta
[cc lang=»css»]
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);
[/cc]
