Gradientes 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:

Propiedad Función de gradiente Significado
background-image linear-gradient(...) Define un gradiente lineal, en una dirección específica.
radial-gradient(...) Define un gradiente radial, en forma de círculo o elipse.
conic-gradient(...) Define un gradiente cónico, desde un punto de vista superior.

Veamos cada uno de estos gradientes por separado para entender como funcionan.

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):

Valor Significado
linear-gradient(, , ...) Gradiente básico entre colores.
linear-gradient( | , , , ...) Gradiente con dirección o ángulo.
linear-gradient( | , , , ...) Gradiente indicando el tamaño del color.

El ejemplo más básico de los anteriores es el primero, donde simplemente indicaremos los colores del gradiente (para que se aprecie el degradado, como mínimo deben ser 2 colores):

div {
  background-image: linear-gradient(blue, red);
}

Esto dibujará un degradado con los colores indicados en dirección desde arriba hacia abajo, que es la dirección por defecto. Se pueden ir añadiendo más colores al gradiente si se desea, o cambiar la dirección del degradado, como veremos a continuación:

Gradiente lineal

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

Parámetros Valor
Dirección del gradiente lineal (ver valores posibles más adelante). El valor por defecto es to bottom.
Número de ángulos de la dirección del gradiente lineal. Alternativa a la opción anterior.
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)

Dirección del gradiente

En el ejemplo visual anterior, la dirección del gradiente es horizontal (hacia la derecha). El primer ejemplo tiene sólo 2 colores (azul y rojo), mientras que el segundo tiene 3 colores (azul, amarillo y rojo). Ambos tienen como dirección una orientación hacia la derecha:

div {
  background-image: linear-gradient(to right, blue, red);           /* Primer ejemplo */
  background-image: linear-gradient(to right, blue, yellow, red);   /* Segundo ejemplo */
}

Como vemos, el primer parámetro utilizado fue to right, que es lo que indica la orientación del gradiente. En este parámetro se puede indicar tanto una palabra clave como un número de grados que represente la dirección:

Orientación de dirección

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

Dirección Grados Significado
to top 0 ó 360deg Gradiente lineal hacia arriba.
to top right 35deg Gradiente diagonal hacia derecha-arriba.
to right 90deg Gradiente lineal hacia derecha.
to bottom right 145deg Gradiente diagonal hacia abajo-derecha.
to bottom 180deg Gradiente lineal hacia abajo.
to bottom left 215deg Gradiente diagonal hacia abajo-izquierda.
to left 270deg Gradiente lineal hacia izquierda.
to top left 325deg Gradiente diagonal hacia izquierda-arriba.

Nota: 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 CSS con tamaño

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:

Gradiente radial

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:

Valor Significado
radial-gradient(, , ...) Gradiente básico entre colores.
radial-gradient(forma, , , ...) Gradiente con forma circular o elíptica.
radial-gradient(forma , , , ...) Gradiente con tamaño o dimensión.
radial-gradient(forma at ubicación, , , ...) Gradiente con colocación inicial.
radial-gradient(forma at ubicación, , , ...) Gradiente con tamaños entre colores.

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:

Parámetros Valor
[forma] ellipse | circle
farthest-corner | closest-corner | farthest-side | closest-side |
[ubicación] center | top | left | right | bottom | top left | top right | bottom left | bottom right
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:

Valor Significado
farthest-corner Intenta cubrir hasta la esquina más lejana (expande hacia ambos lados).
farthest-side Intenta cubrir hasta el lado más lejano (expande hacia un sólo lado).
closest-corner Intenta cubrir hasta la esquina más cercana.
closest-side Intenta cubrir hasta el lado más cercano.
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.

Valor Significado
conic-gradient(, , ...) Gradiente básico entre colores.
conic-gradient(from , , , ...) Gradiente indicando punto de inicio.
conic-gradient(from at ubicación, , , ...) Gradiente indicando ubicación del inicio.

Donde:

Parámetros Valor
from Ángulo desde donde comienza el gradiente cónico. Por defecto from 0deg.
at [ubicación] center | top | left | right | bottom | top left | top right | bottom left | bottom right
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)

A continuación podemos ver la diferencia de un gradiente linear-gradient, un radial-gradient y un conic-gradient:

linear-gradient vs radial-gradient vs conic-gradient

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:

  • Primera repetición: blue 10%, yellow 20%, red 30%
  • Segunda repetición: blue 40%, yellow 50%, red 60%
  • Tercera repetición: blue 70%, yellow 80%, red 90%
  • Cuarta repetición: blue 100%
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.