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

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

<pre class="brush: css no-line-numbers notranslate">/* Повторяющийся градиент с углом наклона 45 градусов,
   начинающийся с синего и заканчивающийся красным цветом */
repeating-linear-gradient(45deg, blue, red);

/* Повторяющийся градиент идущий от нижнего правого угла к верхнему левому,
   начинающийся с синего и заканчивающийся красным цветом */
repeating-linear-gradient(to left top, blue, red);

/* Повторяющийся градиент идущий от низа к верху,
   начинающийся с синего, переходящего в зеленый на 40%,
   и заканчивающийся красным цветом */
repeating-linear-gradient(0deg, blue, green 40%, red);
</pre>

<p>С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведет к резкому визуальному переходу.</p>

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

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

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

<h3 id="Значения">Значения</h3>

<dl>
 <dt><code>&lt;сторона-или-угол&gt;</code></dt>
 <dd>Положение точки начала линии градиента. Начинается со слова <code>to</code> и максимум двух ключевых слов: одно определяет сторону по горизонтали (<code>left</code> или <code>right</code>), и другое сторону по вертикали (<code>top</code> или <code>bottom</code>). Порядок ключевых слов определяющих сторону не важен. Если они не определены, по умолчанию используется <code><span class="css">to</span></code><span class="css"> </span><code><span class="css">bottom</span></code>.</dd>
 <dd>Значения <code>to top</code>, <code>to bottom</code>, <code>to left</code>, и <code>to right</code> эквивалентны углам <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, и <code>90deg</code> соответственно. Прочие значения транслируются в угол.</dd>
 <dt>{{cssxref("&lt;angle&gt;", "&lt;угол&gt;")}}</dt>
 <dd>Угол наклона линии направления градиента. Значение <code>0deg</code> эквивалентно <code>to top</code>; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (<code>0deg</code>).</dd>
 <dt><code>&lt;цвет-позиция&gt;</code></dt>
 <dd>Значение {{cssxref("&lt;color&gt;", "&lt;цвета&gt;")}} с последующей (необязательной) его позицией (либо в {{cssxref("&lt;percentage&gt;", "&lt;процентах&gt;")}}, либо в единицах {{cssxref("&lt;length&gt;", "&lt;длины&gt;")}} вдоль оси градиента).</dd>
 <dd>
 <div class="note">
 <p><strong>Примечание:</strong> Рендер <a href="#Gradient_with_multiple_color_stops">перехода цветов в CSS градиентах</a> следует тем же правилам что и в <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG градиентах</a>.</p>
 </div>
 </dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox notranslate">repeating-linear-gradient(  [ <a href="/en-US/CSS/angle">&lt;угол&gt;</a> | to &lt;сторона-или-угол&gt; ,]? &lt;цвет-позиция&gt; [, &lt;цвет-позиция&gt;]+ )
                            \---------------------------------/ \----------------------------/
                              Определение линии градиента         Список цветов и их позиций

где <code>&lt;</code>сторона-или-угол<code>&gt; = [left | right] || [top | bottom]</code>
   и <code>&lt;</code>цвет-позиция<code>&gt;    = &lt;цвет&gt; [ &lt;процент&gt; | &lt;длина&gt; ]?</code>
</pre>

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

<h3 id="Полоски_зебры">Полоски зебры</h3>

<div class="hidden">
<pre class="brush: css notranslate">body {
  width: 100vw;
  height: 100vh;
}</pre>
</div>

<pre class="brush: css notranslate">body {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 20px,
      black 20px,
      black 40px);
}
</pre>

<p>{{EmbedLiveSample('Полоски_зебры', 120, 120)}}</p>

<h3 id="Повторяющиеся_горизонтальные_полосы">Повторяющиеся горизонтальные полосы</h3>

<div class="hidden">
<pre class="brush: css notranslate">body {
  width: 100vw;
  height: 100vh;
}</pre>
</div>

<pre class="brush: css notranslate">body {
  background-image: repeating-linear-gradient(to bottom,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}
</pre>

<p>{{EmbedLiveSample('Повторяющиеся_горизонтальные_полосы', 120, 120)}}</p>

<div class="note">
<p><strong>Примечание:</strong> Для дополнительных примеров пожалуйста обратитесь к статье <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</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', '#repeating-gradients', 'repeating-linear-gradient()')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

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

<div>{{Compat("css.types.image.gradient.repeating-linear-gradient")}}</div>

<h2 id="Дополнительно">Дополнительно</h2>

<ul>
 <li><a href="/en/CSS/Using_CSS_gradients">Using CSS gradients</a></li>
 <li>Другие функции градиентов: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}</li>
</ul>