Функция radial-gradient
La función radial-gradient establece un gradiente
radial. Esta función se aplica a propiedades que
establecen una imagen de fondo: background,
background-image
o una imagen de borde: border-image,
background-image-source.
Sintaxis
selector {
background: radial-gradient([forma tipo posición], color1 tamaño1, color2 tamaño2...);
}
Valores
| Valor | Descripción |
|---|---|
| forma |
Valores aceptados:
ellipse gradiente elíptico (por defecto),
circle gradiente circular.
|
| tipo |
Establece la extensión del gradiente.
Valores aceptados:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| posición |
Después de la palabra clave at
se especifica la posición en cualquier unidad de tamaño
o mediante palabras clave top, bottom,
left, right, center
en varias combinaciones.
|
| color1 | Color inicial del gradiente en cualquier unidad de color. |
| color2 | Color final del gradiente en cualquier unidad de color. |
| tamaño | Establece la extensión de un color específico del gradiente en cualquier unidad de tamaño. |
Valores para tipo
| Valor | Descripción |
|---|---|
closest-side |
La forma del gradiente coincide con el lado más cercano del bloque. |
closest-corner |
La forma del gradiente se calcula basándose en la distancia a la esquina más cercana del bloque. |
farthest-side |
El gradiente se extiende hasta el lado más lejano del bloque. |
farthest-corner |
La forma del gradiente se calcula basándose en la distancia a la esquina más lejana del bloque. |
Nota
El tipo y la forma se pueden intercambiar, pero la posición debe ir al final del primer parámetro. El tipo de gradiente y su tamaño no funcionan entre sí (es lógico, ya que entran en conflicto). Gana el tamaño.
Ejemplo . La variante más simple
Simplemente establezcamos el color inicial y final:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Ejemplo . Añadamos posición
Establezcamos la posición del centro:
30px - margen izquierdo, 100px - margen superior:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Ejemplo . Posición en porcentajes
Establezcamos la posición del centro en porcentajes:
30% - margen izquierdo, 50% - margen superior:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Ejemplo . Posición con palabra clave
Se pueden usar palabras clave
top, bottom, left,
right, center en varias
combinaciones. Pongamos, por ejemplo, el gradiente
a la derecha en el centro:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Ejemplo . Tamaño del gradiente
En este caso el gradiente funcionará así:
de 0px a 20px será color
rojo puro, de 20px a 60px - gradiente
de rojo a azul, después de 60px - azul
puro:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Ejemplo . Varios colores consecutivos
En este caso el gradiente funcionará así:
de 0px a 20px será color
rojo puro, de 20px a 40px
será color azul puro, de 40px
a 60px - gradiente de azul a verde,
después de 60px - verde puro:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Ejemplo . Tamaño + posición
Establezcamos simultáneamente los tamaños para diferentes colores y la posición del centro del gradiente:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Ejemplo . Forma del gradiente
La forma del gradiente se establece con el primer parámetro
y puede tomar 2 valores: circle
(gradiente circular) o ellipse (gradiente elíptico,
por defecto). ¿Por qué hasta ahora no hemos visto
gradientes elípticos, si
se establece por defecto? Porque hasta ahora
la forma de los bloques era cuadrada. Si cambiamos
la forma a rectangular, veremos el gradiente elíptico:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Ejemplo . Gradiente circular
Hagamos un gradiente circular en un bloque
rectangular. Para ello establezcamos como primer parámetro
la forma del gradiente con la palabra clave
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Ejemplo . Añadamos posición
Añadamos al código anterior también la posición del gradiente:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Ejemplo . Tipo farthest-corner + circle
La forma del gradiente se calcula basándose en la información sobre la distancia a la esquina más lejana del bloque:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ejemplo . Tipo farthest-corner + ellipse
La forma del gradiente se calcula basándose en la información sobre la distancia a la esquina más lejana del bloque:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ejemplo . Tipo farthest-side + circle
El gradiente se extiende hasta el lado más lejano del bloque:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ejemplo . Tipo farthest-side + ellipse
El gradiente se extiende hasta el lado más lejano del bloque:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ejemplo . Tipo closest-corner + circle
La forma del gradiente se calcula basándose en la información sobre la distancia a la esquina más cercana del bloque:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ejemplo . Tipo closest-corner + ellipse
La forma del gradiente se calcula basándose en la información sobre la distancia a la esquina más cercana del bloque:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ejemplo . Tipo closest-side + circle
La forma del gradiente coincide con el lado más cercano del bloque:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Ejemplo . Tipo closest-side + ellipse
La forma del gradiente coincide con el lado más cercano del bloque:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Véase también
-
la función
linear-gradient,
que crea un gradiente lineal -
la función
repeating-linear-gradient,
que crea un gradiente lineal repetitivo -
la función
repeating-radial-gradient,
que crea un gradiente radial repetitivo
