Gradientes radiales

La función radial-gradient() de CSS

Dentro de la categoría de gradientes tenemos una función que permite crear los llamados gradientes radiales. Estos son un tipo de degradado con formas circulares o elípticas. Para crearlos, sólo tenemos que utilizar la función radial-gradient() en lugar de la más conocida y frecuente función linear-gradient().

Dentro de los gradientes radiales también tenemos diferentes modalidades. Como mínimo, debemos escoger una forma específica entre circle y ellipse (que si no es indicada, se usará ellipse), y los colores del gradiente a utilizar:

Gradiente radial

Veamos la sintaxis de las diferentes modalidades:

Función y modalidad 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.
radial-gradient(forma at ubicación, , , ...) Gradiente con tamaños de inicio y fin.

Y ahora, apliquemos estas modalidades en algunos ejemplos de código con sus diferentes parámetros:

div {
/* Modalidad básica */
background: radial-gradient(gold, red, black);

/* Gradiente elíptico */
background: radial-gradient(ellipse, gold 50%, red 55%, black 75%);

/* Gradiente circular */
background: radial-gradient(circle 200px, gold 50%, red 55%, black 75%);

/* Gradiente circular con posición */
background: radial-gradient(circle 400px at left, gold 50%, red 55%, black 75%);
}

Pero vamos a explicar cada uno de esos parámetros para entenderlos perfectamente.

Forma del gradiente radial

El primer parámetro de la función radial-gradient() es la forma del gradiente radial, que puede ser circle o ellipse, esta última la opción por defecto que se seleccionará de no indicar ninguna explícitamente.

Parámetros Valor
circle Crea un gradiente radial con forma circular. Opcionalmente, indicamos su tamaño.
ellipse Crea un gradiente radial con forma de elipse. Opcionalmente, indicamos su tamaño.

Donde el tamaño puede ser uno de los siguientes valores:

Parámetros Valor
Indicamos el radio del círculo (tamaño fijo). En la elipse, son dos valores (horizontal y vertical).
farthest-corner Intenta cubrir hasta la esquina más lejana. Es el valor por defecto si no se indica.
closest-corner Intenta cubrir hasta la esquina más cercana. Ídem al anterior si es un elipse.
farthest-side Intenta cubrir hasta el lado más lejano.
closest-side Intenta cubrir hasta el lado más cercano. Ídem al anterior si es un elipse.

Veamos algunos ejemplos:

.element {
width: 600px;
height: 200px;

/* Gradiente circular de 250px de radio */
background: radial-gradient(circle 250px, blue, red, gold);

/* Gradiente elíptico de 200x100 de radio */
background: radial-gradient(ellipse 200px 100px, blue, red, gold);

/* Gradiente circular con un tamaño del lado más lejano del contenedor */
background: radial-gradient(circle farthest-side, blue, red, gold);
}

Posición del gradiente

A cualquiera de las formas del gradiente se le puede indicar una posición específica para colocarlo en el fondo. Para ello, solo tenemos que indicar la palabra clave at, seguido del lugar donde queremos colocarlo:

Parámetros Valor
Indica la ubicación en x e y de la forma del gradiente, por ejemplo, con porcentajes.
[ubicación] center | top | left | right | bottom | top left | top right | bottom left | bottom right

Un pequeño ejemplo para ilustrar como dar posición a un gradiente:

.element {
width: 600px;
height: 200px;

/* Gradiente circular de 250px de radio */
background: radial-gradient(circle 200px at 0 50%, blue, red, gold);

/* Gradiente elíptico de 200x100 de radio */
background: radial-gradient(ellipse 200px 100px at 100% 100%, blue, red, gold);

/* Gradiente circular con un tamaño del lado más lejano del contenedor */
background: radial-gradient(circle at top right, blue, red, gold);
}

Por su parte, indicar los colores del gradiente se hace exactamente de la misma forma que en los gradientes lineales, salvo que en este caso, seguirán la forma circular o elíptica escogida.

La función repeating-radial-gradient()

En lugar de utilizar la función radial-gradient() podemos utilizar la función repeating-radial-gradient() para indicar un patrón de colores que se repetirá continuamente.

El truco está en que los tamaños indicados a continuación del color, teniendo en cuenta que no debe llegar al 100%, y el navegador se encargará de completarlos y repetirlos una y otra vez hasta que no quede más espacio en el elemento HTML seleccionado:

.element {
/* Establece un patrón repetitivo similar al Looney Tunes */
width: 600px;
height: 400px;
background: repeating-radial-gradient(circle, #ff4444 10%, red 20%, darkred 30%);

/* Equivalente a */
background: repeating-radial-gradient(
circle,
#ff4444 0% 10%,
red 10% 20%,
darkred 20% 30%
);
}

Como se puede ver, el patrón de colores se ajusta a los tamaños indicados y el navegador se encarga de repetirlos una y otra vez, lo que puede sernos de utilidad en muchas ocasiones.

DigitalOcean
Tabla de contenidos