Aplicar líneas de degradado con CSS3 - linear-gradient

linear-gradient es una propiedad CSS3 que permite mezclar colores y obtener líneas de degradado en el elemento seleccionado. Esta nueva propiedad es compatible con:

firefox 16+ | safari 5.1+ | chrome 26+ | internet explorer 10+ | opera 12.1+

Su uso es el siguiente: background: linear-gradient(inicio de degradado, colores);

El inicio de degradado se puede expresar tanto en grados (deg), como en puntos cardinales left|right|top|bottom o bien en píxeles.

Los colores pueden ser tantos como se quieran separándolos por comas, también se le puede indicar el porcentaje de color que se le aplicará al color indicado -> blue 20%

De este modo veremos algunos ejemplos del modo de uso de linear-gradient a continuación ...

Ejemplo 1

#gradiente1{
width: 250px;
height: 250px;
background: -webkit-linear-gradient(left, black, blue);
background: -moz-linear-gradient(left, black, blue);
background: -o-linear-gradient(left, black, blue);
background: linear-gradient(left, black, blue); 
}

Ejemplo 2

#gradiente2{
width: 250px;
height: 250px;
background: -webkit-linear-gradient(left bottom, black, blue, yellow 80%);
background: -moz-linear-gradient(left bottom, black, blue, yellow 80%);
background: -o-linear-gradient(left bottom, black, blue, yellow 80%);
background: linear-gradient(left bottom, black, blue, yellow 80%); 
}

Ejemplo 3

#gradiente3{
width: 250px;
height: 250px;
background: -webkit-linear-gradient(45deg, black 10%, blue, yellow 80%, red);
background: -moz-linear-gradient(45deg, black 10%, blue, yellow 80%, red);
background: -o-linear-gradient(45deg, black 10%, blue, yellow 80%, red);
background: linear-gradient(45deg, black 10%, blue, yellow 80%, red); 
}

Ejemplo 4

#gradiente4{
width: 250px;
height: 250px;
background: -webkit-linear-gradient(30px 30px, black 10%, blue, yellow 80%, red, green);
background: -moz-linear-gradient(30px 30px, black 10%, blue, yellow 80%, red, green);
background: -o-linear-gradient(30px 30px, black 10%, blue, yellow 80%, red, green);
background: linear-gradient(30px 30px, black 10%, blue, yellow 80%, red, green); 
}