CSS: Радиальный градиент для фона

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

Функция radial-gradient() принимает следующие, разделяемые запятой, аргументы:

В качестве первого аргумента указываются ключевые слова и/или единицы измерения CSS, определяющие конечную форму, размер и начальное расположение градиента. Необязательный аргумент.
Разделяемый запятыми список, состоящий из двух или более цветов, за каждым из которых может следовать стоп позиция.

Простейший радиальный градиент требует только два аргумента, определяющие начальный и конечный цвет:

div {
  background-image: radial-gradient(cyan, indigo);
  width: 400px;
  height: 100px;
}

Попробовать »

Как и в случае использования линейных градиентов, радиальный градиент может включать список более чем из двух цветов, и к любому цвету можно указать стоп позицию.

div { 
  width: 400px;
  height: 100px;
  margin: 10px;
}
#one { background-image: radial-gradient(cyan, yellow, indigo, white); }
#two { background-image: radial-gradient(cyan, yellow 10%, indigo 30%, white 50%); }

Попробовать »

Форму радиального градиента можно определить с помощью ключевых слов circle (круг) и ellipse (эллипс), указав одно из них в качестве первого аргумента:

div { 
  width: 400px;
  height: 100px;
  margin: 10px;
}
#one { background-image: radial-gradient(ellipse, cyan, indigo); }
#two { background-image: radial-gradient(circle, cyan, indigo); }

Попробовать »

По умолчанию браузер располагает центральную точку радиального градиента в центре элемента. Центр градиента можно позиционировать с помощью ключевого слова at, за которым располагаются ключевые слова (top, left, right, bottom, center) или значения в указанных единицах измерения CSS:

Значение	Описание
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%.
x-pos y-pos	Первое значение это горизонтальная позиция, второе - вертикальная. Верхний левый угол это позиция 0 0. Единицы измерения могут быть пикселями (0px 0px) или любой другой CSS единицей измерения. Если вы указываете только одно значение, другое значение будет 50%. Вы можете сочетать % и единицы измерения.

Позиционирование градиента указывается до значений цветовых оттенков, но после ключевого слова, определяющего форму градиента (если оно указано):

div { 
  width: 400px;
  height: 100px;
  margin: 10px;
}
#one { background-image: radial-gradient(at right, cyan, indigo); }
#two { background-image: radial-gradient(circle at 300px 50px, cyan, indigo, yellow); }
#three { background-image: radial-gradient(circle at top left, cyan, indigo, yellow); }

Попробовать »

Размер градиента (на сколько большой должна быть конечная форма градиента), можно определить с помощью одного из четырёх ключевых словосочетаний или указания радиуса с помощью единиц измерения CSS (для определения радиуса нельзя использовать проценты).

Ключевые слова	Описание
closest-side	Конечный размер градиента зависит от расстояния между центром градиента и ближайшей к нему стороной элемента (для круга) или от расстояния между центром и двумя ближайшими к нему сторонами элемента (для эллипса).
closest-corner	Конечный размер градиента зависит от расстояния между центром градиента и ближайшим к нему углом элемента.
farthest-side	Конечный размер градиента зависит от расстояния между центром градиента и самой дальней от него стороны элемента (для круга) или от расстояния между центром градиента и двумя самыми дальними от него сторонами (для эллипса).
farthest-corner	Конечный размер градиента зависит от расстояния между центром градиента и самым дальним от него углом элемента. Используется по умолчанию для формы круга или эллипса.

Ключевые слова, определяющие размер градиента или радиус, указываются до или после ключевого слова, определяющего форму, и обязательно до определения позиции.

div { 
  width: 400px;
  height: 100px;
  margin: 10px;
}
#one { background-image: radial-gradient(circle closest-corner at 100px, cyan 50%, indigo); }
#two { background-image: radial-gradient(circle closest-side, cyan, red, indigo); }
#three { background-image: radial-gradient(100px circle at 200px, cyan 50%, indigo); }
#four { background-image: radial-gradient(170px 50px ellipse at 175px, cyan,
                                          #90EE90, rgba(172,160,160,0)); }

Попробовать »