Degradado Lineal en CSS3

Colores

El degradado lineal es una de las mejores herramienta de CSS3, que nos permite dejar a un lado los programas gráficos que usualmente se empleaban para la creación de botones con su respectivo degradado. El código que se utiliza es el siguiente:

background: linear-gradient( propiedades);

En las propiedades se establece el color y  el principio de cada color o el grado de inclinación que esta tendrá. Como siempre no hay mejor que la practica para comprender este estilo de css3, asi es que empezaremos con solo dos colores que tendra nuestro div, insertamos en nuestro body,

<div id="cont">
El problema mas grande del mundo se hubiera solucionado cuando todavia era pequeño.
</div>

a nuestra hoja de estilos agregamos,

#cont{
margin:150px;
height:200px;
width:500px;
background: -ms-linear-gradient( #003 20%, #03f 100%);/* IE10 */
background: -moz-linear-gradient( #003 20%, #03f 100%);/* Mozilla Firefox */
background: -o-linear-gradient( #003 20%, #03f 100%);/* Opera */
background: -webkit-linear-gradient( #003 20%, #03f 100%);/* Webkit Chrome 11 */
background: linear-gradient( #003 20%, #03f 100%);/* IE10 */
font-family: "Comic Sans MS", cursive;
font-size: 24px;
color: #fff;
}

el resultado es el siguiente:



Como observamos el color azul fuerte tiene un veinte por ciento, el cual comenzara a desvanecer, hasta que el segundo color no lo permita, que en este caso es hasta al cien por ciento :

background: linear-gradient( #003 20%, #03f 100%);

Si disminuimos el porcentaje de cien a treinta  observaremos que el degradado no tendrá un desvanecimiento completo y sera estropeado por el treinta por ciento del color azul más bajo.

background: linear-gradient( #003 20%, #03f 30%);

Otra propiedad que utiliza el gradiente es la inclinación top, bottom, left, right, top left, top right, bottom left y bottom right, estas declaraciones nos permiten empezar  nuestros colores en esas posiciones

background: linear-gradient( top left, #003 20%, #03f 30%);

como se muestra a continuación el degradado quedara de la siguiente forma:



También empleamos para la inclinación de inicio con Deg, la cual nos permitirá tener más exacta la posición del giro.

background: linear-gradient(25deg, #003 20%, #03f 30%);

Para finalizar podemos poner una infinidad de colores:

background: linear-gradient( left , #F3C 10% , #03F 15%, #6FF 30%, #CF0 70%,#F9C 90%);




Al principio se muestra un ejemplo de linear gradient, para tener el efecto insertamos el siguiente código, al pasar el ratón encima de él se cambiara de degradado.

#cont:hover{
-webkit-linear-gradient(100deg, #003 20%, #00F 100%);
box-shadow:15px 15px 80px #000;
-moz-box-shadow:20px 20px 1px #FFF;
webkit-box-shadow:20px 20px 1px #FFF;
}