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

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

Функция radial-gradient() создаёт изображение с переходами цветов от центра по кругу или эллипсу. По умолчанию используются ellipse farthest-corner at center. Остановки задают положение цветов вдоль радиуса, а не равные доли площади.

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

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

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

.sample {
  background-image: radial-gradient(circle at 50% 50%, #267fc1 0%, #f58232 100%);
}

<div class="sample"></div>

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

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

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

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

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

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.types.gradient.radial-gradient

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
radial-gradient	✓26…	✓12	✓16…	✓12.1…	✓7…	✓26…	✓16…	✓12.1…	✓7…	✓1.5…	✓4.4…	✓7…
at	✓26	✓12	✓10	✓11.6	✓7	✓26	✓10	✓12	✓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	✓36	✓27	✓7	✓4.0	✓40	✓7
Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)	✓29	✓79	✓36	✓16	✓15	✓29	✓36	✓16	✓15	✓2.0	✓4.4	✓15
Single color stop and 0-1 positions	✓135	✓135	✓136	✓120	✓18.4	✓135	✓136	✓89	✓18.4	✓29.0	✓135	✓18.4
Ещё 4 значений · ✓ поддерживаются везде более 3 летСвернуть

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

CSS синтаксис:

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

Форма

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

Keyword

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

background-image: radial-gradient(circle closest-side at 60% 60%, plum, black, orange); 
background-image: radial-gradient(ellipse closest-side at 60% 60%, plum, black, orange);

background-image: radial-gradient(circle closest-corner at 60% 50%, plum, black, orange); 
background-image: radial-gradient(ellipse closest-corner at 60% 50%, plum, black, orange);

background-image: radial-gradient(circle farthest-side at 100% 50%, plum, black, orange); 
background-image: radial-gradient(ellipse farthest-side at 100% 50%, plum, black, orange);

background-image: radial-gradient(circle farthest-corner at 60% 60%, plum, black, orange); 
background-image: 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) и в процентных значениях. Точка остановки сообщает браузеру, что градиент по радиусу должен достичь заданного цвета к заданному значению и плавно перейти к следующему цвету, если он есть.

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

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

Измените положение центра и замените circle на ellipse.

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: radial-gradient(circle at 30% 40%, #f4c95d, #35658a);
}

Сравнение размеров радиального градиента

Сравните четыре размера для круга и эллипса. Измените размер или положение центра в 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: radial-gradient(circle closest-side at 60% 60%, plum, black, orange);
}

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

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

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

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

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

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

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