CSS: Degradados

Los degradados son rangos de colores en los que se observa una transición visual ordenada entre dos o más colores. Por ejemplo, el color turquesa se vuelve naranja gradualmente. En CSS existen tres funciones de background-image para diseñar degradados lineales, radiales y cónicos.

Así es como se ve un degradado lineal:

Tabla de funciones para diseñar degradados:

Degradado lineal

El degradado lineal es el tipo de degradado más común y utilizado en diseño web. Se crea mediante la función linear-gradient(), que puede tener dos o más parámetros. Como mínimo se deben especificar dos colores. También puede indicarse la dirección, el ángulo y la posición de cada color.

Los colores se separan con una coma.

La sintaxis del degradado lineal:

selector {
  background-image:
    linear-gradient(
      dirección,
      color tamaño tamaño,
      color tamaño tamaño,
    )
}

Por defecto, dos colores se orientan de arriba a abajo:

.def {
  background-image: linear-gradient(#008080, #ff7f2a);
}

Resultado:

Tal y como se puede ver en este ejemplo, por defecto, el degradado va desde arriba (color azul) hacia abajo (color naranja). Pero en el primer degradado vimos que la dirección iba de izquierda a derecha. ¿Cómo se modifica?

La dirección de los degradados lineales

Para cambiar la dirección se introduce una expresión formada por palabras clave en el primer parámetro (antes de los colores). Por ejemplo, la expresión to right indica que el degradado va hacia la derecha de cada color.

.lineal {
  background-image: linear-gradient(to right, teal, #ff7f2a);
}

Resultado:

La dirección del gradiente radial también se puede indicar mediante un valor numérico y unidades de ángulo, que pueden ser las siguientes: deg (grados), grad (gradianes), rad (radianes) y turn (giros). Vamos a ver una tabla con las equivalencias de direcciones de los degradados.

La mejor forma de entender los ángulos es imaginando una circunferencia. En la parte superior (to top) ubicamos los 0 grados, por tanto los 180 grados quedan abajo (to bottom). A la derecha será to right, por tanto su valor será entre 0 y 180, es decir, 90 grados. En la bisectriz entre arriba (0 grados) y la derecha (90 grados) encontramos el ángulo de 45 grados (to top right). En el fondo es intuitivo, aunque hay que detenerse a pensar.

El tamaño del color en degradados lineales

La distancia entre colores se distribuye uniformemente de forma automática, pero también se puede modificar. Para indicar distancias se puede usar cualquier unidad, como los porcentajes. Las distancias se indican a la derecha, formando una pareja de parámetros antes de cada coma o del final.

En este ejemplo indicamos que el color turquesa debe llegar hasta la posición del 70%, posición en la que debe empezar el degradado. Al color naranja le indicamos un 80%, posición en la que empieza el color sin degradar. Esto implica que el degradado se produce entre el 70% y el 80%.

.lineal-70-80 {
  background-image:
    linear-gradient(
      to right,
      teal 70%,
      #ff7f2a 80%);
}

Resultado:

Se puede ver que hay un 70% de color turquesa, un 10% de color degradado y un 20% de color naranja. Si al naranja no le hubiésemos indicado ninguna distancia, no alcanzaría su color máximo (sin degradar) hasta el final. Por lo tanto, se vería con un degradado que ocupa el último 30%; de esta manera:

Las distancias todavía se pueden indicar con mayor precisión mediante dos valores para cada color, indicando así el principio y el final de cada color. De este modo, podríamos definir un degradado como el siguiente:

.lineal-25-50-75 {
  background-image:
    linear-gradient(
      to right,
      teal 0% 25%,
      #ff7f2a 25% 50%,
      teal 50% 75%,
      #ff7f2a 75% 100%);
}

Resultado:

Este último degradado es un poco repetitivo. En realidad existe una función que permite sintetizar la sintaxis de los degradados con el fin de repetirse hasta alcanzar el 100%. Vamos a descubrirla.

La función ‘repeating-linear-gradient()’

Con la función repeating-linear-gradient() es posible crear degradados que se repetirán hasta cubrir el 100% de la superficie de relleno. Esto significa que si indicamos colores hasta el 50%, se repetirán en la otra mitad. El código anterior habría sido algo más simple con esta función:

.lineal-25-50 {
  background-image:
    repeating-linear-gradient(
      to right,
      teal 0% 25%,
      #ff7f2a 25% 50%);
}

Esto tiene un gran potencial para crear incluso fondos rayados. Imaginemos un rayado de líneas con una inclinación de 45 grados alternando los dos colores, y con un grosor de 10 píxeles cada una. Veamos un ejemplo:

.rayado {
  background-image:
    repeating-linear-gradient(
    45deg,
    teal 0 10px,
    #ff7f2a 10px 20px);
}

Resultado:

Debido a que cada color empieza justo cuando termina el otro, no hay degradado: el cambio de color es totalmente directo. Se observa como esta función ha repetido las dos líneas hasta llenar todo el fondo del elemento.

Degradado radial

Los degradados radiales pueden tener forma circular o elíptica, lo que aporta muchas posibilidades a nivel de diseño web. Este tipo de degradados se crean con la función radial-gradient(), que puede tener varios parámetros, como la forma, el tamaño, la posición y los colores.

La sintaxis del degradado radial:

selector {
  background-image:
    radial-gradient(
      forma tamaño at ubicación,
      color tamaño tamaño,
      color tamaño tamaño,
    )
}

Ejemplo de degradado radial:

.radial {
  background-image: radial-gradient(#ff7f2a, teal);
}

Resultado:

Tal y como se puede ver, como mínimo deben usarse dos colores. Por defecto, se usa la forma elíptica adaptada a la forma rectangular de la caja; el degradado empieza en el centro (el primer color) y crece hacia fuera (el segundo color). Es posible añadir tantos colores como sea necesario.

La forma de los degradados radiales

Para indicar la forma de un degradado radial se debe introducir la palabra clave de las dos formas posibles: circle para definir un círculo y ellipse para darle forma elíptica (valor por defecto). La forma debe introducirse como primer parámetro de la función radial-gradient().

Si al ejemplo anterior le hubiéramos indicado una forma circular en vez de dejar la predeterminada (elíptica), se vería de la siguiente manera:

.radial-circle {
  background-image:
    radial-gradient(
      circle,
      #ff7f2a,
      teal);
}

Resultado:

El tamaño de los degradados radiales

Además de indicar la forma es posible indicar el tamaño. Si se trata de un círculo, el valor será su radio; si se trata de una elipse, el primer valor será el radio horizontal y el segundo será el radio vertical. Los valores deben ser unidades de longitud absolutas, como píxeles, centímetros, em, etc.

También puede usarse las siguientes palabras clave:

Si el degradado tiene forma de círculo, el valor farthest-corner ya es el valor por defecto, y en caso de que la forma sea elíptica, el valor closest-corner también es su valor por defecto. Vamos a ver su uso.

Este parámetro se introduce dentro del primer parámetro, a la derecha de la forma. En el siguiente ejemplo se puede ver la sintaxis de este caso:

.radial-side {
  background-image:
    radial-gradient(
      circle closest-side,
      #ff7f2a,
      teal);
}

Resultado:

El primer color (naranja) empieza en el centro, y con forma circular crece hasta encontrar la arista más cercana. Debido a que la caja es más ancha que alta, las aristas más cercanas son la superior y la inferior. La altura mide 100 píxeles, por tanto en este caso su radio calculado es de 50 píxeles.

La posición de los degradados radiales

También se puede indicar la posición del centro del degradado radial. En el primer parámetro, justo después de la forma o el tamaño, se introduce el prefijo at seguido de la posición, que puede ser una o dos unidades de longitud relativas o absolutas, o las siguientes palabras clave:

Por ejemplo, si queremos un círculo de 80 píxeles de radio que esté situado en la esquina superior derecha, indicamos lo siguiente:

.radial-top-left {
  background-image:
    radial-gradient(
      circle 80px at top right,
      #ff7f2a,
      teal);
}

Resultado:

También podemos ajustar la posición en la que empieza o termina un color. Volviendo al caso anterior, con un círculo de radio de 80 píxeles, podemos indicarle que el color naranja esté sin degradarse durante 70 píxeles; por tanto, el cambio de color tendrá un espesor de 10 píxeles.

.radial-top-left-70 {
  background-image:
    radial-gradient(
      circle 80px at top right,
      #ff7f2a 70px,
      teal);
}

Resultado:

La función ‘repeating-radial-gradient()’

Con la función repeating-radial-gradient() se puede diseñar un patrón de colores degradados que se repetirá hasta llenar la totalidad de la zona de relleno. Para conseguirlo es tan fácil como indicar unos tamaños que no cubran el 100%. El navegador web se encargará de repetir el patrón en la zona que falta.

.rayado-radial {
  background-image:
    repeating-radial-gradient(
      circle at top right,
      #ff7f2a,
      teal 20px,
      #ff7f2a 40px);
}

Resultado:

Tal y como se puede ver, se ha añadido un tercer color idéntico al primero (naranja) con el fin de aplicar un degradado más suave. De lo contrario, el patrón se repetiría de forma directa, visualizándose el degradado en un único lado.

Degradado cónico

El degradado cónico es similar al radial: es como si estuviéramos viendo una figura cónica desde arriba. Se crea mediante la función conic-gradient(), cuyos parámetros mínimos son dos colores. También puede indicarse el ángulo la dirección, el tamaño y la posición de cada color.

La sintaxis del degradado cónico:

selector {
  background-image:
    conic-gradient(
      from ángulo at ubicación,
      color tamaño tamaño,
      color tamaño tamaño,
    )
}

Veamos un ejemplo:

.conico {
  background-image: conic-gradient(teal, #ff7f2a);
}

Resultado:

El ángulo de los degradados cónicos

Es posible definir el ángulo de los degradados cónicos mediante la palabra clave from y un ángulo, que puede ser en grados, gradianes, radianes y giros. El ángulo se introduce como primer parámetro. Veamos un ejemplo de 45 grados:

.conico-45deg {
  background-image:
    conic-gradient(
      from 45deg,
      teal,
      #ff7f2a);
}

Resultado:

De este modo, el ángulo se define en 45 grados siguiendo la dirección de las agujas de un reloj y partiendo de la parte superior central, es decir, el lugar en el que se encuentra la posición de las 12 horas.

La posición de los degradados cónicos

Al igual que ocurre con los degradados radiales, también se puede especificar la posición del centro del degradado cónico. En el primer parámetro, después de indicar el ángulo, se introduce el prefijo at seguido de la posición. Se pueden usar unidades de longitud o las siguientes palabras clave:

En este ejemplo situamos el centro del degradado cónico a 20 píxeles de la esquina inferior izquierda, tanto en el eje horizontal como en el vertical:

.conico-45deg-pos {
  background-image:
    conic-gradient(
      from 45deg at 20px 80px,
      teal,
      #ff7f2a);
}

Resultado:

La función ‘repeating-conic-gradient()’

Con la función repeating-conic-gradient() se puede crear patrones de colores repetitivos para los degradados cónicos. Es importante indicar el tamaño de los colores para que el navegador web sepa cuando debe empezar la repetición, y se encargará de cubrir la superficie del contenido y el relleno.

.rayado-conico {
  background-image:
    repeating-conic-gradient(
      from 45deg at 20px 80px,
      teal 10%,
      #ff7f2a 15%,
      teal 20%);
}

Resultado:

En este último ejemplo se ha añadido un tercer color idéntico al primero (turquesa) con el fin de diseñar un degradado más suave, justo entre el punto en el que termina un patrón de repetición y empieza el otro.