Gradientes lineales

facebook-svg gplus-svg twitter-svg

Un degradado ( o gradiente de color ) es una transición suave y progresiva entre dos o más colores. En CSS3 utilizamos los gradientes sobretodo como imágenes de fondo ( background-image ), pero podemos utilizarlos también como viñetas ( list-style-image ) o como bordes ( border-image ).

See the Pen CSS border-image y list-style-image by Gabi (@enxaneta) on CodePen.

La mala noticia es que la sintaxis para codificar los gradientes cambió. La buena noticia es que actualmente el soporte en los navegadores es muy bueno y como mucho necesitamos utilizar –webkit- como prefijo.
Otra alternativa sería utilizar una librería como autoprefixer o prefixfree que permiten escribir código CSS sin prefijos.

La dirección del degradado

En el caso de los gradientes lineales, la transición del color pasa a lo largo de una línea: la dirección del degradado ( gradient line ). Podemos especificar la dirección del degradado utilizando ángulos o palabras clave. Si no especificamos la dirección del degradado, el CSS genera un gradiente que va de arriba abajo.

La sintaxis antigua va siempre con prefijo:
-webkit-  ( Chrome10+, Safari5.1+ )

background: -webkit-linear-gradient(#F06 0%, #000 100%);
background: -webkit-linear-gradient(-45deg, #F06 0%, #000 100%);
background: -webkit-linear-gradient(top left, #F06 0%, #000 100%);

La nueva sintaxis va sin prefijos.

background: linear-gradient(#F06 0%, #000 100%);
background: linear-gradient(135deg, #F06 0%, #000 100%);
background: linear-gradient(to bottom right, #F06 0%, #000 100%);

En las dos sintaxis el primer parámetro opcional ( destacado arriba en rojo ) representa la dirección del degradado.
Si la dirección del degradado es un ángulo ( dado en grados sexagesimales ),  las cosas cambian de manera dramática entre la nueva y la vieja sintaxis. En la sintaxis antigua ( -webkit- ), un valor de 0deg genera un gradiente que va de izquierda a derecha. En la nueva sintaxis ( sin prefijo ) , un valor de 0deg genera un gradiente que va de abajo arriba. Como si no fuera bastante, en la nueva sintaxis los ángulos van en el sentido del reloj, mientras que en la antigua sintaxis los ángulos van en el sentido contrario.

See the Pen CSS linear-gradient #2 by Gabi (@enxaneta) on CodePen.

background: -webkit-linear-gradient(-45deg, #F06 0%, #000 100%);
background: linear-gradient(135deg, #F06 0%, #000 100%);
test
Fig1. - La sintaxis antigua.
test
Fig2. - La nueva sintaxis.

See the Pen CSS linear-gradient #1 by Gabi (@enxaneta) on CodePen.

Utilizar palabras clave

También podemos utilizar palabras clave para precisar la dirección del degradado.

En la sintaxis antigua ( -webkit- ) la dirección del degradado puede ser una, o una combinación de estas palabras clave:

left: el degradado empieza a la izquierda; ( es equivalente a 0deg )
right: el degradado empieza a la derecha; ( es equivalente a 180deg )
top: el degradado empieza arriba; ( es equivalente a 270deg )
bottom: el degradado empieza abajo; ( es equivalente a 90deg )

background: -webkit-linear-gradient(top left, #F06 0%, #000 100%);

La nueva sintaxis – ( sin prefijos ) utiliza estas palabras clave, o una combinación, siempre introducidas por to ( hacia )

to left: el degradado va hacia la izquierda; ( es equivalente a 270deg )
to right: el degradado va hacia la derecha; ( es equivalente a 90deg )
to top: el degradado va hacia arriba; ( es equivalente a 0deg )
to bottom: el degradado va hacia abajo; ( es equivalente a 180deg )

background: linear-gradient(to bottom right, #F06 0%, #000 100%);

See the Pen CSS linear-gradient palabras clave by Gabi (@enxaneta) on CodePen.

Los color-stop

Los color-stop representan puntos a lo largo de la línea de degradado ( gradient line ), donde el color cambia.

background: linear-gradient(315deg, #000, #F06 50%, #000);

En este ejemplo el primer color-stop es #000, o sea: negro. El segundo color-stop está justo en el medio de la línea de degradado ( 50% ), y el color es fucsia ( #F06 ). El tercer color-stop está al final de esta línea, y es de nuevo negro ( #000 ). Si no especificamos el porcentaje, el CSS considera que el primer color stop empieza al 0% y el último color-stop acaba al 100%.
Podemos especificar tantos color-stops como queramos.

Efectos especiales

Dijimos que un gradiente de color es una transición suave y progresiva entre dos o más colores. No tiene por que ser así. Podemos conseguir límites tajantes utilizando color-stops situados muy cerca el uno del otro.

background: linear-gradient(#F06 50%, #000 51%);

.n{
	background: -webkit-linear-gradient(#F06 50%, #000 51%);
	background: linear-gradient(#F06 50%, #000 51%);

}

No hay que olvidar que los gradientes son imágenes, y que en CSS3 podemos utilizar varias imágenes de fondo para un solo elemento. Para esto tenemos que separar los url de las varias imágenes con una coma.
También tenemos que tener en cuenta que la segunda imagen aparece debajo de la primera. Por lo tanto la primera imagen tendrá que ser al menos en parte transparente.

background-image: 
linear-gradient(45deg, #F06 25%, transparent 26%, transparent 75%, #F06 75% ),
linear-gradient(135deg, #F06 25%, #000 26%, #000 75%, #F06 75% );

.o{
background-image: -webkit-linear-gradient(45deg, #F06 25%, transparent 26%, transparent 75%, #F06 75%),
				  -webkit-linear-gradient(135deg, #F06 25%, #000 26%, #000 75%, #F06 75%);
background-image: linear-gradient(45deg, #F06 25%, transparent 26%, transparent 75%, #F06 75%),
                  linear-gradient(135deg, #F06 25%, #000 26%, #000 75%, #F06 75%);
}

Demos un paso más: en todos los ejemplos anteriores los degradados ocupan toda la superficie del elemento. Pero esto no tiene que ser así. La propiedad background-size nos permite redimensionar las imágenes de fondo.

background-size:50px 50px;
.p{
background-image: -webkit-linear-gradient(45deg, #F06 25%, transparent 26%, transparent 75%, #F06 75%),
				  -webkit-linear-gradient(135deg, #F06 25%, #000 26%, #000 75%, #F06 75%);
background-image: linear-gradient(45deg, #F06 25%, transparent 26%, transparent 75%, #F06 75%),
                  linear-gradient(135deg, #F06 25%, #000 26%, #000 75%, #F06 75%);
background-size:36px 36px;}

Vea más ejemplos de patrones hechos utilizando gradientes. CSS3 Patterns Gallery

Gradientes en Internet Explorer< 10

Navegadores como IE10 y más nuevos soportan bien la nueva sintaxis para codificar los gradientes de color. En lo que concierne los navegadores IE9 y más antiguos, aunque no soportan gradientes CSS, si que ofrecen una manera programática para codificar degradados de color: los llamados filtros.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );

Aunque estos filtros trabajen solo con colores hex, podemos crear degradados con transparencias en IE, utilizando  unos extraños colores hex de 8 digitos,  donde los primeros dos dígitos representan el componente alfa.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#801e5799', endColorstr='#7db9e8',GradientType=1 );

En el ejemplo anterior el parámetro GradientType indica que el gradiente es horizontal ( GradientType=1 ). Para gradientes verticales utilizamos ( GradientType=0 ).

 

Como podemos ver IE<10 acepta solo dos color-stops ( startColorstr y endColorstr ) y genera solo gradientes horizontales y verticales. Además hay quienes consideran que estos filtros son una mala praxis, ya que interfieren negativamente en el rendimiento de la página.

Los gradientes de color en Internet Explorer: IE gradients filter
Colores hex de 8 digitos: Working with 8-digit hex colors (aRGB) in Internet Explorer filters