Cómo utilizar los degradados de CSS3

Los degradados fueron un buen agregado dentro del aluvión de características que trajo CSS3. En lugar de añadir un único color, ahora podemos crear combinaciones de colores en una sola declaración sin tener que echar mano de imágenes, práctica la cual podría incluso ralentizar el rendimiento de nuestro sitio web. Si ya has experimentado con los degradados de CSS seguramente te suenen estos dos métodos: radial y linear-gradient. En este post os explicaremos a qué hacen referencia y te enseñaremos a dominar los degradados de CSS3.

Creando degradados

Tal y como dice la documentación, los degradados de CSS3 son simplemente imágenes. En otras palabras, no existe ninguna propiedad para declarar un degradado. Para ello, tendremos que hacer uso de la propiedad background-image.

Si echamos un vistazo al código para crear un degradado, podemos percatarnos de que es un pelín complejo. Lo cual, puede confundir a muchísima gente.

div {
  background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}

No te preocupes, a continuación profundizaremos en cada parte de la sintaxis para aclarar un poco las cosas.

En primer lugar, si quieres crear un degradado lineal tendrás que utilizar la función linear-gradient(). La función cuenta con tres parámetros principalmente. El primer parámetro define la posición inicial del degradado. Puede utilizar una keyword descriptiva, como por ejemplo top para que el degradado comience desde arriba:

div {
  background-image: linear-gradient(top, #FF5A00, #FFAE00); 
}  

El código de arriba es la versión oficial de W3C para crear degradados. En realidad, es mucho más simple, se explica por sí mismo y también creará el siguiente degradado.

También puedes utilizar bottom para hacer lo contrario, o si no right o left. También puedes crear degradados diagonales utilizando angle degree como posición de inicio del degradado. Tal que así:

div {
  background-image: linear-gradient(45deg, #FF5A00, #FFAE00);
}

El código anterior generará este degradado:

El segundo parámetro de la función determina el primer color y cuando debe parar (esto en porcentaje). La posición de parada en realidad es opcional; el navegador es lo suficientemente inteligente como para determinar la posición correcta, por lo que cuando no especificamos la parada del primer color, el navegador tomará el 0% como valor por defecto.

Y el siguiente parámetro es la segunda combinación de color. Funciona como el valor anterior, solo que si es el último color aplicado, y no especificamos la posición de parada, se tomará un valor por defecto del 100%. Ahora, veamos el siguiente ejemplo:

div {
  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}

El código anterior creará un degradado como el que hemos visto antes (sin diferencia) pero ahora definimos la posición de parada del color.

Ahora cambiemos la parada del color, y esta vez especificaremos el 50% para el primer color y el 51% para el segundo color, y veamos el resultado.

div {
  background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);
}

Transparencia

Crear transparencias en un degradado también es posible. Para crear el efecto necesitamos traducir el color de hexadecimal a RGB y bajar el canal alfa.

div {
  background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));
} 

El código anterior reducirá la intensidad del color en un 20%, y el degradado quedará así:

Múltiples colores

Si deseas agregar más colores, simplemente añade los colores uno por uno junto a un delimitador de coma y deja que el navegador determine la posición de cada color.

div {
  background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
}

Fijate en qué arco iris tan bonito ha creado el anterior código.

Compatibilidad con navegadores

Desgraciadamente, a la hora de redactar este artículo, no todos los navegadores modernos admiten la sintaxis estándar. Aún tenemos que añadir los prefijos de cada vendor (-webkit, -moz, -ms y -o-). Por lo tanto, con la sintaxis completa, quedaría así:

div {
  background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}