CSS функция repeating-radial-gradient()

Определение и применение

CSS функция repeating-radial-gradient() (повторяющийся радиальный градиент) позволяет создать шаблон радиального градиента с определенными точками остановки и повторить его по всему фону элемента.

Более подробно о работе с градиентами вы можете ознакомиться в статьях «CSS функции: линейные градиенты» и «CSS функции: радиальные градиенты».

Попробуйте функцию repeating-radial-gradient()

Меняйте два цвета и форму и положение центра. Длина повторения задаёт расстояние между началом одного перехода и следующего.

Параметры градиента
Форма

.sample {
  background-image: repeating-radial-gradient(circle at 50% 50%, #267fc1 0px, #f58232 40px);
}
HTML примера
HTML
<div class="sample"></div>

Проценты остановок относятся к конечному горизонтальному радиусу эллипса, а проценты размеров формы — к ширине и высоте области изображения. У повторяющегося градиента период равен разности позиций последней и первой остановок; одинаковые крайние цвета помогают убрать скачок на стыке повторов.

Для closest-corner эллипс сохраняет соотношение радиусов из closest-side, увеличиваясь до ближайшего угла. Форма и размеры определяют конечный эллипс, но изображение градиента заполняет всю область фона.

Поддержка браузерами

Спецификация: CSS images

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.types.gradient.repeating-radial-gradient
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
repeating-radial-gradient✓26✓12✓16✓12.1✓7✓26✓16✓12.1✓7✓1.5✓4.4✓7
at✓26✓12✓16✓15✓7✓26✓16✓14✓7✓1.5✓4.4✓7
doubleposition✓71✓79✓64✓58✓12.1✓71✓64✓50✓12.2✓10.0✓71✓12.2
Hue interpolation method✓111✓111✓127✓97✓16.2✓111✓127✓75✓16.2✓22.0✓111✓16.2
Interpolation color space✓111✓111✓127✓97✓16.2✓111✓127✓75✓16.2✓22.0✓111✓16.2
Interpolation Hints / Gradient Midpoints✓40✓79✓36✓27✓7✓40✓46✓27✓7✓4.0✓40✓7
Single color stop and 0-1 positions✓135✓135✓136✓120✓18.4✓135✓136✓89✓18.4✓29.0✓135✓18.4

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
background-image / background: repeating-radial-gradient([форма keyword (или размер)] at позиция x-axis y-axis, цвет1 – остановка1, . . . , цветn – остановкаn);

Форма

Эллиптическая форма определяется значением ellipse, которое является значением по умолчанию (отсутствует необходимость его указывать), а круглая форма определяется значением circle.

Keyword

Градиент рассчитывается исходя из расстояния до ближайшей / дальней стороны, либо ближайшего / дальнего угла элемента.

Значение Описание
closest-side Градиент рассчитывается исходя из расстояния до ближайшей стороны элемента от её центра для круглых градиентов (ось x или ось y) и до ближайших сторон (ось x и ось y) если градиент в форме эллипса.
CSS
background-image: repeating-radial-gradient(circle closest-side at 60% 60%, plum, black, orange); 
background-image: repeating-radial-gradient(ellipse closest-side at 60% 60%, plum, black, orange);

Сравнить круг и эллипс в работающем примере.

closest-corner Градиент растягивается таким образом, чтобы он проходил через ближайший к центру угол элемента (размер рассчитывается в зависимости от расстояния до ближайшего угла элемента).
CSS
background-image: repeating-radial-gradient(circle closest-corner at 60% 50%, plum, black, orange); 
background-image: repeating-radial-gradient(ellipse closest-corner at 60% 50%, plum, black, orange);

Сравнить круг и эллипс в работающем примере.

farthest-side Градиент рассчитывается исходя из расстояния до дальней стороны элемента от её центра для круглых градиентов (ось x или ось y) и до дальних сторон (ось x и ось y) если градиент в форме эллипса.
CSS
background-image: repeating-radial-gradient(circle farthest-side at 100% 50%, plum, black, orange); 
background-image: repeating-radial-gradient(ellipse farthest-side at 100% 50%, plum, black, orange);

Сравнить круг и эллипс в работающем примере.

farthest-corner Конечная фигура проходит через самый удалённый от центра угол. У эллипса пропорции радиусов берутся из farthest-side, затем оба радиуса увеличиваются в одинаковое число раз. Это значение по умолчанию.
CSS
background-image: repeating-radial-gradient(circle farthest-corner at 60% 60%, plum, black, orange); 
background-image: repeating-radial-gradient(ellipse farthest-corner at 60% 60%, plum, black, orange);

Сравнить круг и эллипс в работающем примере.

Размер

Явный размер задаёт радиусы: одна длина — радиус круга, две длины или процента — радиусы эллипса. Форму можно указать вместе с подходящими радиусами, например circle 40px или ellipse 30% 50%. Ключевое слово размера вроде closest-side с явными радиусами не сочетают.

Процентные значения нельзя использовать, если вы указываете только одно значение (радиус для круглого элемента), при использовании двух значений (для эллиптического градиента) допускается указывать эти значения в процентах.

Позиция

Начальная позиция радиального градиента определяется ключевым словом – center, но может быть изменена с использованием единиц измерения длины (например: px или em), процентными значениями и ключевыми словами, которые используются в CSS свойстве background-position, оно отвечает за положение (позицию) фонового изображения.

Значение Описание
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom 		Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет "center"
x% y% Задаёт положение центра градиента: первое значение — горизонтальное, второе — вертикальное. 0% 0% обозначает левый верхний угол, 100% 100% — правый нижний. По умолчанию центр находится в 50% 50%. Если указано только одно процентное значение, второе равно 50%. Положение градиента при использовании процентных значений.
x y Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

Цвет

Допускается использовать не только «Предопределенные цвета», но и любые «значения цвета, используемые в CSS» - шестнадцатеричные (HEX), значения цвета RGB / -A и HSL /-A.

Остановка

Значения точек остановки (color stops) задаются в единицах измерения длины (например – px или em) и в процентных значениях. Точка остановки сообщает браузеру, что градиент по радиусу должен достичь заданного цвета к заданному значению и плавно перейти к следующему цвету, если он есть.

Примеры, попробуйте сами

Настройка градиента

Измените расстояния между остановками или положение центра. Узор повторяется после последней остановки.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #24364b;
    overflow-wrap: anywhere;
}
section {
    margin-block: 16px;
    padding: 12px;
    border: 1px solid #a8b8c7;
}
p {
    padding: 8px;
}
label {
    display: block;
    margin-block: 12px;
}
input,
button {
    max-width: 100%;
    font: inherit;
    padding: 8px;
}
input[type='checkbox'] + label {
    display: inline;
}
a {
    color: #135fb5;
}
.sample {
    min-height: 200px;
    border: 1px solid #60788a;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Настройка градиента</title>
  </head>
  <body>
    <div class="sample" aria-label="Градиент"></div>
  </body>
</html>
style.css
CSS
.sample {
    background-image: repeating-radial-gradient(circle at center, #35658a 0 12px, #f4c95d 12px 24px);
}

Сравнение размеров повторяющегося радиального градиента

Сравните четыре размера для круга и эллипса. Измените размер или положение центра в style.css; подписи показывают исходные настройки.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color-scheme: light dark;
    color: CanvasText;
    background: Canvas;
}
figure {
    margin: 0 0 20px;
}
figcaption {
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}
.sample {
    width: 100%;
    height: 160px;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Размер радиального градиента</title>
  </head>
  <body>
    <figure>
      <figcaption>Исходно: circle closest-side, центр 60% 60%</figcaption>
      <div class="sample sample-1a"></div>
    </figure>
    <figure>
      <figcaption>Исходно: ellipse closest-side, центр 60% 60%</figcaption>
      <div class="sample sample-1b"></div>
    </figure>
    <figure>
      <figcaption>Исходно: circle closest-corner, центр 60% 50%</figcaption>
      <div class="sample sample-2a"></div>
    </figure>
    <figure>
      <figcaption>Исходно: ellipse closest-corner, центр 60% 50%</figcaption>
      <div class="sample sample-2b"></div>
    </figure>
    <figure>
      <figcaption>Исходно: circle farthest-side, центр 100% 50%</figcaption>
      <div class="sample sample-3a"></div>
    </figure>
    <figure>
      <figcaption>Исходно: ellipse farthest-side, центр 100% 50%</figcaption>
      <div class="sample sample-3b"></div>
    </figure>
    <figure>
      <figcaption>Исходно: circle farthest-corner, центр 60% 60%</figcaption>
      <div class="sample sample-4a"></div>
    </figure>
    <figure>
      <figcaption>Исходно: ellipse farthest-corner, центр 60% 60%</figcaption>
      <div class="sample sample-4b"></div>
    </figure>
  </body>
</html>
style.css
CSS
.sample-1a {
    background-image: repeating-radial-gradient(circle closest-side at 60% 60%, plum, black, orange);
}

.sample-1b {
    background-image: repeating-radial-gradient(ellipse closest-side at 60% 60%, plum, black, orange);
}

.sample-2a {
    background-image: repeating-radial-gradient(circle closest-corner at 60% 50%, plum, black, orange);
}

.sample-2b {
    background-image: repeating-radial-gradient(ellipse closest-corner at 60% 50%, plum, black, orange);
}

.sample-3a {
    background-image: repeating-radial-gradient(circle farthest-side at 100% 50%, plum, black, orange);
}

.sample-3b {
    background-image: repeating-radial-gradient(ellipse farthest-side at 100% 50%, plum, black, orange);
}

.sample-4a {
    background-image: repeating-radial-gradient(circle farthest-corner at 60% 60%, plum, black, orange);
}

.sample-4b {
    background-image: repeating-radial-gradient(ellipse farthest-corner at 60% 60%, plum, black, orange);
}