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 (en-US).

Sintaxis

// 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> (en-US)), 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.

Sintaxis formal

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> (en-US) ]? , |
    [ 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

Especificaci贸n Estado Comentarios
CSS Images Module Level 3
La definici贸n de 'radial-gradients()' en esta especificaci贸n.
Candidate Recommendation Definici贸n inicial

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Caracter铆stica Firefox (Gecko) Chrome Internet Explorer Opera Safari
Soporte b谩sico (en background y background-image) 3.6 (1.9.2)-moz (en-US)[1]
16 (16)
10.0 (534.16)-webkit (en-US)[2] 10.0[3] 11.60-o (en-US) 5.1-webkit (en-US)[2]
En border-image 29 (29) (Yes) (Yes) (Yes) (Yes)
En cualquier propiedad que acepte el tipo <image> Sin soporte (Yes) (Yes) (Yes) (Yes)
Sintaxis anterior de webkit This API has not been standardized. Sin soporte 3-webkit (en-US)[2] Sin soporte Sin soporte 4.0-webkit (en-US)[2]
Sintaxis de at (sintaxis est谩ndar final) 10 (10)-moz (en-US)[1]
16 (16)[4]
26 10.0 11.60-o (en-US)[2]
2.12
Sin soporte
Consejos de interpolaci贸n (un porcentaje sin color) 36 (36) 40   27  
Caracter铆stica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte b谩sico (en background y background-image) (Yes) 1.0 (1.9.2)-moz (en-US)[1]
16.0 (16)
10 (Yes) (Yes)
En border-image (Yes) 29.0 (29) (Yes) (Yes) (Yes)
En cualquier propiedad que acepte el tipo <image> Sin soporte (Yes) (Yes) (Yes) (Yes)
Sintaxis anterior de webkit This API has not been standardized. ? Sin soporte ? ? ?
Sintaxis de at (sintaxis est谩ndar final) ? 10.0 (10)-moz (en-US)[1]
16.0 (16)
10 ? ?

[1] Implementado en Firefox 3.6 usando prefijo, y sintaxis 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 sintaxis 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