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().
La función radial-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:
Veamos la sintaxis de las diferentes modalidades:
| Función y modalidad | Tipo de gradiente |
|---|---|
radial-gradient() | Básico entre colores. |
radial-gradient(forma, ) | Con forma circular o elíptica. |
radial-gradient(forma ) | Con tamaño o dimensión. |
radial-gradient(forma at ubicación, ) | Con colocación inicial. |
radial-gradient(forma at ubicación, ) | Con tamaños entre colores. |
radial-gradient(forma at ubicación, ) | Con tamaños de inicio y fin. |
Y ahora, apliquemos estas modalidades en algunos ejemplos de código con sus diferentes parámetros:
.box {
width: 300px;
height: 150px;
}
.basic-gradient {
background: radial-gradient(gold, red, black);
}
.ellipse-gradient {
background: radial-gradient(ellipse, gold 50%, red 55%, black 75%);
}
.circle-gradient {
background: radial-gradient(circle 200px, gold 50%, red 55%, black 75%);
}
.circle-detailed-gradient {
background: radial-gradient(circle 400px at left, gold 50%, red 55%, black 75%);
}
Basic:
<div class="box basic-gradient"></div>
Ellipse:
<div class="box ellipse-gradient"></div>
Circle:
<div class="box circle-gradient"></div>
Circle detailed:
<div class="box circle-detailed-gradient"></div>
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
| 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: 150px;
}
/* Gradiente circular de 250px de radio */
.circle {
background: radial-gradient(circle 250px, blue, red, gold);
}
/* Gradiente elíptico de 200x100 de radio */
.ellipse {
background: radial-gradient(ellipse 200px 100px, blue, red, gold);
}
/* Gradiente circular con un tamaño del lado más lejano del contenedor */
.circle-detailed {
background: radial-gradient(circle farthest-side, blue, red, gold);
}
Circle:
<div class="element circle"></div>
Ellipse:
<div class="element ellipse"></div>
Circle detailed:
<div class="element circle-detailed"></div>
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: 150px;
}
/* Gradiente circular de 250px de radio */
.circle {
background: radial-gradient(circle 200px at 0 50%, blue, red, gold);
}
/* Gradiente elíptico de 200x100 de radio */
.ellipse {
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 */
.circle-detailed {
background: radial-gradient(circle at top right, blue, red, gold);
}
Circle:
<div class="element circle"></div>
Ellipse:
<div class="element ellipse"></div>
Circle detailed:
<div class="element circle-detailed"></div>
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
.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%
);
}
<div class="element"></div>
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.
