---
title: radial-gradient()
slug: Web/CSS/radial-gradient()
tags:
  - Función CSS
  - Gráficos(2)
  - Imagen CSS
translation_of: Web/CSS/radial-gradient()
---
<p>{{CSSRef}}</p>

<p>La función CSS <code>radial-gradient()</code> crea una imagen ({{cssxref("&lt;image&gt;")}}) que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (<em>center</em>) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS {{cssxref("&lt;gradient&gt;")}}.</p>

<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Los gradientes radiales son definidos por su centro (<em>center</em>), el contorno y posición de la <em>figura resultante</em> y los puntos de definición de color (<em>color stops</em>). 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 <em>rayo de gradiente virtual</em> 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 <code>100%</code>. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.</p>

<p>Las figuras resultantes solo pueden ser círculos (<code>circle</code>) o elipses (<code>ellipse</code>).</p>

<p>Como cualquier otro gradiente, un gradiente radial CSS no es un {{cssxref("&lt;color&gt;")}} CSS, sino una imagen <a href="/es/docs/Web/CSS/image#no_intrinsic">sin dimensiones intrínsecas</a>, 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.</p>

<p>La función <code>radial-gradient</code> no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS {{Cssxref("repeating-radial-gradient")}}.</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="brush: css notranslate">// 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( <em>&lt;extent-keyword&gt;</em>, … )      /* Dibuja un círculo */
radial-gradient( circle <em>radius</em>, … )         /* Un círculo centrado con longitud dada. Puede ser un porcentaje */
radial-gradient( ellipse <em>x-axis</em> <em>y-axis</em>, … ) /* Los dos ejes semi-mayores son indicados, horizontal y después vertical */

// Definición de la posición de la figura
radial-gradient ( … at &lt;position&gt;, … )

// Definición de los stops de colores
radial-gradient ( …, &lt;color-stop&gt;, … )
radial-gradient ( …, &lt;color-stop&gt;, &lt;color-stop&gt; )</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>&lt;position&gt;</code></dt>
 <dd>Una posición ({{cssxref("&lt;position&gt;")}}), interpretada de la misma forma que {{Cssxref("background-position")}} o {{Cssxref("transform-origin")}}. Si es omitida, su valor predeterminado es <code>center</code>.</dd>
 <dt><code>&lt;shape&gt;</code></dt>
 <dd>La figura del gradiente. Puede ser un valor <code>circle</code> (que indica que la figura del gradiente es un círculo con radio constante) o <code>ellipse</code> (que indica que la figura del gradiente es una elipse alineada por ejes). El valor predeterminado es <code>ellipse</code>.</dd>
 <dt><code>&lt;color-stop&gt;</code></dt>
 <dd>Representa un color fijo en una posición precisa, su valor está compuesto por un valor {{cssxref("&lt;color&gt;")}}, seguido por una posición opcional (que puede ser de tipo {{cssxref("&lt;percentage&gt;")}} o {{cssxref("&lt;length&gt;")}} a lo largo del rayo de gradiente). Un porcentaje de <code>0%</code>, o una longitud de <code>0</code>, representan el centro del gradiente, mientras que el valor de <code>100%</code> 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.</dd>
 <dt><code>&lt;extent-keyword&gt;</code></dt>
 <dd>Valores clave que describen la longitud de la figura resultante. Los valores posibles son:</dd>
 <dd>
 <table class="standard-table">
  <tbody>
   <tr>
    <th>Constante</th>
    <th>Descripción</th>
   </tr>
   <tr>
    <td><code>closest-side</code></td>
    <td>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).</td>
   </tr>
   <tr>
    <td><code>closest-corner</code></td>
    <td>El tamaño de la figura resultante coincide exactamente con la esquina de la caja más cercana desde el centro del gradiente.</td>
   </tr>
   <tr>
    <td><code>farthest-side</code></td>
    <td>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).</td>
   </tr>
   <tr>
    <td><code>farthest-corner</code></td>
    <td>El tamaño de la figura resultante coincide exactamente con la esquina de la caja más lejana al centro del gradiente.</td>
   </tr>
  </tbody>
 </table>
 Los borradores anteriores del estándar incluyeron otras palabras clave (<code>cover</code> y <code>contain</code>) como sinónimos de los estándares <span class="st"><code>farthest-corner</code></span> y <code>closest-side</code> respectivamente. Use solo las palabras clave estándar, pues algunas implementaciones ya no soportan las variantes anteriores.</dd>
</dl>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

<pre class="syntaxbox notranslate"><code>radial-gradient(
  [ [ circle || {{cssxref("&lt;length&gt;")}} ]                         [ at {{cssxref("&lt;position&gt;")}} ]? , |
    [ ellipse || [ &lt;length&gt; | {{cssxref("&lt;percentage&gt;")}} ]{2} ]  [ at &lt;position&gt; ]? , |
    [ [ circle | ellipse ] || &lt;extent-keyword&gt; ]   [ at &lt;position&gt; ]? , |
    at &lt;position&gt; ,
  ]?
  &lt;color-stop&gt; [ , &lt;color-stop&gt; ]+
)
where &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
  and<code> &lt;color-stop&gt;     = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code>
</code></pre>

<h2 id="Example_1" name="Example_1">Ejemplo 1</h2>

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

<pre class="brush: css notranslate">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%);
} </pre>

<p>{{ EmbedLiveSample('Example_1') }}</p>

<h2 id="Example_2" name="Example_2">Ejemplo 2</h2>

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

<pre class="brush: css notranslate">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%);
}</pre>

<p>{{ EmbedLiveSample('Example_2') }}</p>

<h2 id="Example_3" name="Example_3">Ejemplo 3</h2>

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

<pre class="brush: css notranslate">body {
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
}</pre>

<p>{{ EmbedLiveSample('Example_3') }}</p>

<h2 id="Example_4" name="Example_4">Ejemplo 4</h2>

<p>Este código producirá un círculo difuso con radio de <code>16px</code>:</p>

<pre class="brush: css notranslate">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);
} </pre>

<p>{{ EmbedLiveSample('Example_4') }}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}})</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
    {{CompatGeckoDesktop("16")}}</td>
   <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[2]</sup></td>
   <td>10.0<sup>[3]</sup></td>
   <td>11.60{{property_prefix("-o")}}</td>
   <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup></td>
  </tr>
  <tr>
   <td>En {{cssxref("border-image")}}</td>
   <td>{{CompatGeckoDesktop("29")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>En cualquier propiedad que acepte el tipo {{cssxref("&lt;image&gt;")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxis anterior de webkit</a> {{non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>3{{property_prefix("-webkit")}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>4.0{{property_prefix("-webkit")}}<sup>[2]</sup></td>
  </tr>
  <tr>
   <td>Sintaxis de <code>at</code> (sintaxis estándar final)</td>
   <td>{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
    {{CompatGeckoDesktop("16")}}<sup>[4]</sup></td>
   <td>26</td>
   <td>10.0</td>
   <td>11.60{{property_prefix("-o")}}<sup>[2]</sup><br>
    2.12</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Consejos de interpolación (un porcentaje sin color)</td>
   <td>{{CompatGeckoDesktop("36")}}</td>
   <td>40</td>
   <td> </td>
   <td>27</td>
   <td> </td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}})</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
    {{CompatGeckoMobile("16")}}</td>
   <td>10</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>En {{cssxref("border-image")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("29")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>En cualquier propiedad que acepte el tipo {{cssxref("&lt;image&gt;")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxis anterior de webkit</a> {{non-standard_inline}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Sintaxis de <code>at</code> (sintaxis estándar final)</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
    {{CompatGeckoMobile("16")}}</td>
   <td>10</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[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 <code>layout.css.prefixes.gradients</code> en <code>false</code>.</p>

<p>[2] Implementado en WebKit usando prefijo, y sintaxis anterior. WebKit desde la versión 528 soporta la función anterior <a href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Véase también su <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">soporte actual</a> para gradientes radiales.</p>

<p>[3] Internet Explorer 5.5 a 9.0 soporta la propiedad exclusiva <a href="https://msdn.microsoft.com/es-es/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p>

<p>[4] Además del soporte sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} incluye soporte para una versión con prefijo <code>-webkit</code> de la función, por razones de compatibilidad, dentro de la opción <code>layout.css.prefixes.webkit</code>, con valor <code>false</code> de forma predeterminada. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esa opción es <code>true</code>.</p>

<h2 id="Véase_también">Véase también</h2>

<ul>
 <li><a href="/es/docs/CSS/Using_CSS_gradients">Usando gradientes con CSS</a>, {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}</li>
 <li>Propuesta original de WebKit: <a href="http://webkit.org/blog/175/introducing-css-gradients/">http://webkit.org/blog/175/introducing-css-gradients/</a></li>
 <li>Nueva implementación de WebKit: <a href="http://webkit.org/blog/1424/css3-gradients/">http://webkit.org/blog/1424/css3-gradients/</a></li>
</ul>