View on GitHub

lenguaje-css

Gradientes de color CSS

Otra funcionalidad que se echaba mucho de menos en versiones anteriores de CSS era la de utilizar fondos con gradientes, o lo que es lo mismo, un color inicial que se transforma poco a poco en uno o varios colores sucesivamente. Sin embargo, en versiones anteriores a CSS3 no era posible hacerlo desde código. Por suerte, hoy en día hemos superado esa limitación.

En CSS3 se introducen algunas expresiones relacionadas que harán esta tarea algo muy sencillo, pudiendo utilizarlas fácilmente mediante la propiedad background-image e indicando el tipo de gradiente deseado:

Gradientes lineales

El primer tipo de gradiente es el gradiente lineal, que permite crear fondos degradados que van en una cierta dirección y cambian de un color a otro, dependiendo de la lista de colores indicada por parámetro.

La sintaxis a utilizar debe ser una de las siguientes (es la misma, pero con menor o mayor cantidad opcional de información):

Pero los parámetros que se pueden utilizar son los siguientes:

Orientación de dirección

Para que quede aún más claro, veamos una tabla de equivalencias:

Si utilizas los grados en lugar de las palabras clave puedes usar valores intermedios (por ejemplo, 280deg o 58deg) y ser más preciso con la dirección si lo necesitas.

Colores del gradiente

Por defecto, las distancias entre colores se ajustan automáticamente con proporciones equivalentes, salvo que especifiquemos un tamaño (porcentaje o píxeles, por ejemplo) justo después del color en cuestión, que se puede indicar de forma opcional:

div {
  background: linear-gradient(to right, blue 50%, red 55%, green 75%);
}

Este tamaño representa el momento en el que el gradiente comienza a cambiar el color, respecto al tamaño del gradiente completo. En este fragmento de código, a diferencia del anterior, nos mostraría un gradiente similar al que vemos a continuación, donde se aprecia que los tamaños o distancias entre colores no son equivalentes, sino que corresponden azul (0-50%), rojo (50%-55%) y verde (55%-75%), el cuál permanece hasta el final al no haber ningún color más:

Gradiente radial

Como vimos al principio, a parte de gradientes lineales, también podemos crear otros tipos de gradientes, como por ejemplo, los gradientes radiales, que permite crear degradados con formas circulares. Para ello, sólo tenemos que utilizar la expresión radial-gradient en lugar de linear-gradient:

De la misma forma, también tenemos diferentes modalidades para crear gradientes radiales, desde una muy básica donde le indicamos sólo los colores, hasta otra más avanzada donde le damos forma, tamaño e incluso ubicación:

Algunos ejemplos aplicando estos parámetros:

div {
  background: radial-gradient(gold, red, black);
  background: radial-gradient(ellipse, gold 50%, red 55%, black 75%);
  background: radial-gradient(circle 200px, gold 50%, red 55%, black 75%);
  background: radial-gradient(circle 400px at left, gold 50%, red 55%, black 75%);
}

Donde:

El primer color del gradiente El siguiente color del gradiente De forma opcional, se puede indicar a que altura comienza a cambiar el gradiente. … (Se pueden seguir añadiendo colores) En el caso de la forma podemos elegir circle o ellipse, dependiendo de si queremos un gradiente con forma circular o uno con forma de elipse (que se adapta a la forma del elemento). En el caso del tamaño del elipse o círculo, tenemos varias opciones para indicar el tamaño que tendrá nuestro gradiente:

Le da un tamaño específico al gradiente (píxeles, porcentajes, etc…). Sólo usable en circle.

En el caso de la ubicación, simplemente especificamos la posición en la que queremos que esté colocado el centro del gradiente.

Gradiente cónico

Recientemente, se ha incorporado un nuevo tipo de gradiente muy interesante en CSS, visualmente muy similar al gradiente radial, pero tratándose de una visualización de un cono desde un plano superior, incluyendo sus sombras.

Donde:

Poco hay que añadir en este tipo de gradiente, ya que funciona muy similar a los anteriores. La única diferencia mencionable es el uso de la palabra clave from antes de indicar los ángulos de dirección, si se requiere.

Gradientes repetitivos

Por último, todos los gradientes que hemos visto permiten la posibilidad de añadir el prefijo repeating- para conseguir que el efecto del gradiente, en lugar de adaptarse a la región completa, realice una repetición constantemente. Comprueba los siguientes ejemplos de forma individual:

div {
  background: repeating-linear-gradient(blue 10%, yellow 20%, red 30%);   /* Ejemplo 1 */
  background: repeating-radial-gradient(blue 10%, yellow 20%, red 30%);   /* Ejemplo 2 */
  background: repeating-conic-gradient(blue 10%, yellow 20%, red 30%);    /* Ejemplo 3 */
}

Es importante que al usar el prefijo repeating- se especifiquen tamaños a los colores, puesto que se necesita saber cuando comenzará a repetirse. En los ejemplos anteriores, los colores seguirían el patrón hasta el último color y volverían a repetirse sucesivamente, de forma que tendríamos: