Функция radial-gradient

Если в линейных градиентах цвета перетекают друг в друга вдоль прямой, то в радиальных градиентах цвета расходятся от центра к краям — как круги на воде.

За этот эффект отвечает функция CSS radial-gradient().

Вот полный синтаксис функции:

radial-gradient(
[<radial-shape>]  — форма градиента
[<radial-size>]   — размер градиента
[ at <position> ] — позиция центра
<color-stop-list> — список колорстопов
);

Для самого простого варианта достаточно указать список колорстопов, в котором перечислить два цвета через запятую. Например:

background: radial-gradient(yellow, green);

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

Добавим наш первый радиальный градиент!