---
title: radial-gradient()
slug: Web/CSS/radial-gradient()
translation_of: Web/CSS/radial-gradient()
---
<div>{{CSSRef}}</div>

<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>radial-gradient()</code></strong> создаёт картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("&lt;gradient&gt;")}}, который является расширением типа {{cssxref("&lt;image&gt;")}}.</p>

<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div>



<p>Как и любой градиент, радиальный градиент не имеет <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">внутренних размеров</a>, то есть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применён.</p>

<p>Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию {{cssxref("repeating-radial-gradient")}}.</p>

<p>Поскольку <code>&lt;gradient&gt;ы</code> относятся к типу <code>&lt;image&gt;</code>, они могут быть использованы только там где используется тип <code>&lt;image&gt;</code>. По этой причине <code>radial-gradient()</code> не будет работать совместно с {{Cssxref("background-color")}} и другими свойствами, которые используют тип {{cssxref("&lt;color&gt;")}}.</p>

<h2 id="Композиция_свойства">Композиция свойства</h2>

<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Радиальный градиент задаётся <em>позицией центра</em>, <em>конечной формой</em>, и двумя или более <em>точками изменения цвета</em>.</p>

<p>Чтобы создать плавный градиент, функция <code>radial-gradient()</code> рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.</p>

<p>Точки изменения цвета расположены на <em>виртуальном луче градиента</em>, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является <code>100%</code>. Цвет каждой такой формы задаётся цветом на пересечении луча градиента и этой формы.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="brush: css no-line-numbers notranslate">/* Градиент в центре контейнера,
   переход от красного к синему и после к зелёному */
radial-gradient(circle at center, red 0, blue, green 100%)</pre>

<h3 id="Параметры">Параметры</h3>

<dl>
 <dt>{{cssxref("&lt;position&gt;")}}</dt>
 <dd>Позицию начала градиента можно рассматривать как {{cssxref("background-position")}} или {{cssxref("transform-origin")}}. По умолчанию позиция равна <code>center</code>.</dd>
 <dt><code>&lt;shape&gt;</code></dt>
 <dd>Форма градиента. Может принимать значение <code>circle</code> (подразумевается что формой является круг с постоянным радиусом) или <code>ellipse</code> (форма является эллипсом, выровненным по оси). По умолчанию имеет значение <code>ellipse</code>.</dd>
 <dt><code>&lt;extent-keyword&gt;</code></dt>
 <dd>Параметр определяющий размер конечной формы. Возможные значения:</dd>
 <dd>
 <table class="standard-table">
  <tbody>
   <tr>
    <th>Значение</th>
    <th>Описание</th>
   </tr>
   <tr>
    <td><code>closest-side</code></td>
    <td>Конечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).</td>
   </tr>
   <tr>
    <td><code>closest-corner</code></td>
    <td>Конечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра.</td>
   </tr>
   <tr>
    <td><code>farthest-side</code></td>
    <td>Схоже с <code>closest-side</code>, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон)</td>
   </tr>
   <tr>
    <td><code>farthest-corner</code></td>
    <td>Конечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра.</td>
   </tr>
  </tbody>
 </table>

 <div class="note">
 <p><strong>Заметка:</strong> Ранние реализации этой функции включают в себя другие значения свойства (<code>cover</code> and <code>contain</code>) которые являются синонимами <span class="st"><code>farthest-corner</code></span> и <code>closest-side</code>, соответственно. Рекомендуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.</p>
 </div>
 </dd>
 <dt><code>&lt;color-stop&gt;</code></dt>
 <dd>{{cssxref("&lt;color&gt;")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("&lt;percentage&gt;")}} или {{cssxref("&lt;length&gt;")}} вдоль оси градиента). Значения <code>0%</code>, или <code>0</code> представляют центр градиента; значение <code>100%</code> представляет собой виртуальное пересечение конечной формы с виртуальным лучом градиента. Процентные значения будут линейно расположены на луче градиента.</dd>
</dl>

<h3 id="Синтаксис_2">Синтаксис</h3>

<pre class="syntaxbox notranslate"><code>radial-gradient(
  [ [ circle || <a href="/en-US/docs/CSS/length">&lt;length&gt;</a> ]                         [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
    [ ellipse || [ <a href="/en-US/docs/CSS/length">&lt;length&gt;</a> | <a href="/en-US/docs/CSS/percentage">&lt;percentage&gt;</a> ]{2} ]  [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
    [ [ circle | ellipse ] || &lt;extent-keyword&gt; ]   [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
    at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ,
  ]?
  &lt;color-stop&gt; [ , &lt;color-stop&gt; ]+
)
где &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
  и<code> &lt;color-stop&gt;     = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code>
</code></pre>

<h2 id="Примеры">Примеры</h2>

<h3 id="Простой_градиент">Простой градиент</h3>

<div class="hidden">
<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">.radial-gradient {
  width: 240px;
  height: 120px;
}</pre>
</div>

<pre class="brush: css notranslate">.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
} </pre>

<p>{{EmbedLiveSample('Простой_градиент', 120, 120)}}</p>

<h3 id="Градиент_со_смещённым_центром">Градиент со смещённым центром</h3>

<div class="hidden">
<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">.radial-gradient {
  width: 240px;
  height: 120px;
}</pre>
</div>

<pre class="brush: css notranslate">.radial-gradient {
  background-image: radial-gradient(farthest-corner at 40px 40px,
      #f35 0%, #43e 100%);
}</pre>

<p>{{EmbedLiveSample('Градиент_со_смещённым_центром', 240, 120)}}</p>

<div class="note">
<p><strong>Заметка:</strong> Дополнительные примеры можно найти в <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS градиентов</a>.</p>
</div>

<h2 id="Спецификация">Спецификация</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарии</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Свойство</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Стандартное использование (в {{cssxref("background")}} и {{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>Использование в {{cssxref("border-image")}}</td>
   <td>{{CompatGeckoDesktop("29")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Использование на любых других свойствах работающих с типом {{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/">Устаревший 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><code>at</code> синтаксис (финальный стандартизованный вариант)</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><a href="https://drafts.csswg.org/css-images-4/#color-interpolation-hint">Interpolation hints/gradient midpoints</a> (точки заданные в процентах без значения цвета)</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>Свойство</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Стандартное использование (в {{cssxref("background")}} и {{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>Использование в {{cssxref("border-image")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("29")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Использование на любых других свойствах работающих с типом {{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/">Устаревший webkit синтаксис</a> {{non-standard_inline}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>at</code> синтаксис (финальный стандартизованный вариант)</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] Firefox 3.6 синтаксис - ранний реализованный вариант с префиксом. До Firefox 36, Gecko не применял градиенты на расширенное цветовое пространство, так как это приводило к неожиданному появлению серого оттенка при использовании прозрачности. Начиная с Firefox 42, версии градиентов с префиксом могут быть отключены установкой <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p>

<p>[2] Ранний синтаксис Webkit с префиксом. WebKit с версии 528 поддерживает устаревший вариант <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>. Смотрите также <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">текущую поддержку</a> радиальных градиентов.</p>

<p>[3] Internet Explorer от 5.5 до 9.0 поддерживают собственный фильтр <a href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code></a>.</p>

<p>[4] В дополнении к поддержке без префикса, Gecko 44.0 {{geckoRelease("44.0")}} добавил поддержку версии с префиксом <code>-webkit</code> по соображениям обратной совместимости с настройкой <code>layout.css.prefixes.webkit</code>, установленной по умолчанию как <code>false</code>. Начиная с Gecko 49.0 {{geckoRelease("49.0")}} используется установка по умолчанию как <code>true</code>.</p>

<h3 id="Сноски_к_Quantum_CSS">Сноски к Quantum CSS</h3>

<ul>
 <li>Gecko имеет долгоиграющий баг благодаря которому значения вроде <code>radial-gradient(circle gold,red)</code> будут работать, даже несмотря на то, что пропущена запятая между <code>circle</code> и <code>gold</code> ({{bug(1383323)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизу в Firefox 57) исправляет этот баг.</li>
 <li>Также в Gecko выражения с {{cssxref("calc")}} считаются недействительными — значение не валидно при использовании в  radial-gradient() ({{bug(1376019)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизу Firefox 57) исправляет этот баг.</li>
</ul>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Использование CSS градиентов</a></li>
 <li>Другие варианты градиентов: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}</li>
 <li>{{cssxref("&lt;image&gt;")}}</li>
</ul>