radial-gradient()

La función CSS radial-gradient() crea una imagen (<image>) que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (center) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS <gradient>.

Los gradientes radiales son definidos por su centro (center), el contorno y posición de la figura resultante y los puntos de definición de color (color stops). El gradiente radial consiste, desde su centro hasta su figura resultante y potencialmente más allá, en figuras concénctricas sucesivas de escala uniforme, idénticas en su figura final. Los stops de color son posicionados en un rayo de gradiente virtual que va horizontalmente desde el centro hacia la derecha. La proporción para posicionar los stops de colores es relativa a la intersección entre la figura final y su rayo de gradiente, representando el 100%. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.

Las figuras resultantes solo pueden ser círculos (circle) o elipses (ellipse).

Como cualquier otro gradiente, un gradiente radial CSS no es un <color> CSS, sino una imagen sin dimensiones intrínsecas, es decir, no tiene un tamaño natural o predefinido, ni radio. Su tamaño concreto coincidirá con el del elemento al que se aplica.

La función radial-gradient no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS repeating-radial-gradient.

Sintáxis

// Definición de la figura
radial-gradient( circle, … )                /* Sinónimo de radial-gradient( circle farthest-corner, … ) */
radial-gradient( ellipse, … )               /* Sinónimo de radial-gradient( ellipse farthest-corner, … ) */
radial-gradient( <extent-keyword>, … )      /* Dibuja un círculo */
radial-gradient( circle radius, … )         /* Un círculo centrado con longitud dada. Puede ser un porcentaje */
radial-gradient( ellipse x-axis y-axis, … ) /* Los dos ejes semi-mayores son indicados, horizontal y después vertical */

// Definición de la posición de la figura
radial-gradient ( … at <position>, … )

// Definición de los stops de colores
radial-gradient ( …, <color-stop>, … )
radial-gradient ( …, <color-stop>, <color-stop> )

Valores

<position>

Una posición (<position>), interpretada de la misma forma que background-position o transform-origin. Si es omitida, su valor predeterminado es center.

<shape>

La figura del gradiente. Puede ser un valor circle (que indica que la figura del gradiente es un círculo con radio constante) o ellipse (que indica que la figura del gradiente es una elipse alineada por ejes). El valor predeterminado es ellipse.

<color-stop>

Representa un color fijo en una posición precisa, su valor está compuesto por un valor <color>, seguido por una posición opcional (que puede ser de tipo <percentage> o <length> a lo largo del rayo de gradiente). Un porcentaje de 0%, o una longitud de 0, representan el centro del gradiente, mientras que el valor de 100% representa la intersección de la figura final con el rayo virtual de gradiente. Los valores porcentuales internos son posicionados linealmente en el rayo gradiente.

<extent-keyword>

Valores clave que describen la longitud de la figura resultante. Los valores posibles son:

Constante	Descripción
closest-side	La figura resultante coincide con el lado de la caja más cercano al centro (para los círculos) o coincide con los lados vertical y horizontal más cercanos al centro (en caso de elipses).
closest-corner	El tamaño de la figura resultante coincide exactamente con la esquina de la caja más cercana desde el centro del gradiente.
farthest-side	Similar a closest-side, excepto que el tamaño de la figura resultante coincide con el lado de la caja más lejano al centro (o los lados vertical y horizontal).
farthest-corner	El tamaño de la figura resultante coincide exactamente con la esquina de la caja más lejana al centro del gradiente.

Los borradores anteriores del estándar incluyeron otras palabras clave (cover y contain) como sinónimos de los estándares farthest-corner y closest-side respectivamente. Use solo las palabras clave estándar, pues algunas implementaciones ya no soportan las variantes anteriores.

Sintáxis formal

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)
where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
  and <color-stop>     = <color> [ <percentage> | <length> ]? 

Ejemplo 1

Usando el siguiente código CSS podemos obtener un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de turquesa (#00FFFF), a blanco, a azul (#0000FF):

body {
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
} 

Ejemplo 2

Este código generará un fondo de elipse in la esquina más lejana (farthest-corner) a 470px 45px, cambiando el color de amarillo (#FFFF80), a marrón pálido, a azul pálido (#E6E6FF):

body {
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
}

Ejemplo 3

Este código generará un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de rojo (#FF0000) a azul (#0000FF):

body {
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
}

Ejemplo 4

Este código producirá un círculo difuso con radio de 16px:

body {
  width: 100vh;
  height: 100vh;
  background-image:  radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px); 
} 

Especificaciones

Compatibilidad de navegadores

[1] Implementado en Firefox 3.6 usando prefijo, y sintáxis anterior. Antes de Firefox 36, Gecko no aplicaba gradientes en espacios de color premultiplicado, provocando que apareciera una sombra gris cuando se usaba con transparencia. Desde Firefox 42, la versión con prefijo puede ser deshabilitada estableciendo la opción layout.css.prefixes.gradients en false.

[2] Implementado en WebKit usando prefijo, y sintáxis anterior. WebKit desde la versión 528 soporta la función anterior -webkit-gradient(radial,…). Véase también su soporte actual para gradientes radiales.

[3] Internet Explorer 5.5 a 9.0 soporta la propiedad exclusiva filter: progid:DXImageTransform.Microsoft.Gradient() filter.

[4] Además del soporte sin prefijo, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) incluye soporte para una versión con prefijo -webkit de la función, por razones de compatibilidad, dentro de la opción layout.css.prefixes.webkit, con valor false de forma predeterminada. Desde Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) el valor predeterminado de esa opción es true.

Véase también

• Usando gradientes con CSS, repeating-radial-gradient, linear-gradient
• Propuesta original de WebKit: https://webkit.org/blog/175/introducing-css-gradients/
• Nueva implementación de WebKit: https://webkit.org/blog/1424/css3-gradients/