---
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("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.</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><gradient>ы</code> относятся к типу <code><image></code>, они могут быть использованы только там где используется тип <code><image></code>. По этой причине <code>radial-gradient()</code> не будет работать совместно с {{Cssxref("background-color")}} и другими свойствами, которые используют тип {{cssxref("<color>")}}.</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("<position>")}}</dt>
<dd>Позицию начала градиента можно рассматривать как {{cssxref("background-position")}} или {{cssxref("transform-origin")}}. По умолчанию позиция равна <code>center</code>.</dd>
<dt><code><shape></code></dt>
<dd>Форма градиента. Может принимать значение <code>circle</code> (подразумевается что формой является круг с постоянным радиусом) или <code>ellipse</code> (форма является эллипсом, выровненным по оси). По умолчанию имеет значение <code>ellipse</code>.</dd>
<dt><code><extent-keyword></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><color-stop></code></dt>
<dd>{{cssxref("<color>")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("<percentage>")}} или {{cssxref("<length>")}} вдоль оси градиента). Значения <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"><length></a> ] [ at <a href="/en-US/docs/CSS/position_value"><position></a> ]? , |
[ ellipse || [ <a href="/en-US/docs/CSS/length"><length></a> | <a href="/en-US/docs/CSS/percentage"><percentage></a> ]{2} ] [ at <a href="/en-US/docs/CSS/position_value"><position></a> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [ at <a href="/en-US/docs/CSS/position_value"><position></a> ]? , |
at <a href="/en-US/docs/CSS/position_value"><position></a> ,
]?
<color-stop> [ , <color-stop> ]+
)
где <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
и<code> <color-stop> = <color> [ <percentage> | <length> ]?</code>
</code></pre>
<h2 id="Примеры">Примеры</h2>
<h3 id="Простой_градиент">Простой градиент</h3>
<div class="hidden">
<pre class="brush: html notranslate"><div class="radial-gradient"></div>
</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"><div class="radial-gradient"></div>
</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("<image>")}}</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("<image>")}}</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("<image>")}}</li>
</ul>