Радиальные градиенты

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

Спецификация: w3.org/TR/css3-images/#radial-gradients.

radial-gradient

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

background: radial-gradient(gold, orangered);

По умолчанию центр градиента находится по центру, градиент имеет форму эллипса:

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

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

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

Чтобы градиент имел форму круга — это нужно задать явно с помощью ключевого слова circle.

Если форма не задана, но задан размер — одно значение задает радиус круга, если значений два — градиент получает форму эллипса. При наличии размеров явное задание формы градиента игнорируется.

Центр градиента

Для задания центра градиента используются те же ключевые слова, что и для линейного градиента, но с приставкой at: at top, at right, at bottom, at left и at center — значение по умолчанию.

Их так же можно сочетать между собой, чтобы расположить градиент на заданной стороне, например: at right top — в верхнем правом углу.

Ниже можно увидеть как работают разные положения центра:

Код первого квадрата:

background: radial-gradient(at top left, purple, crimson, orangered, gold);

Также можно задавать точное положение градиента, например at 20% 50% или at 10px 150px.

Размер градиента

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

Если задано одно значение — оно считается радиусом круглого градиента. Если задано два значения — первое считается горизонтальным радиусом эллипса, второе — вертикальным.

Ниже примеры круглых и эллиптических градиентов. Форма фигуры определяется заданными размерами:

Также можно использовать ключевые слова:

closest-side — градиент заканчивается у границы элемента ближайшей к центру градиента. Если это эллипс, градиент касается всех границ элемента.

farthest-side — градиент заканчивается у дальней границы элемента. Если это эллипс, градиент касается всех границ элемента.

closest-corner — конечная фигура растягивается таким образом, чтобы она проходила через угол элемента, ближайший к центру градиента. Если конечная фигура — эллипс, градиент растягивается на всю фигуру. При этом параметре градиент заполняет собой всю фигуру, частично выходя за её пределы.

farthest-corner — аналогично closest-corner, только конечная фигура проходит через угол, дальний от центра градиента. Значение по умолчанию.

Некоторым градиентам добавлено положение at bottom, чтобы было лучше видно действие кода:

repeating-radial-gradient

Радиальный градиент также может быть повторяющимся. Примерный код:

background: repeating-radial-gradient(circle,
  darkkhaki, darkkhaki .5em,
  transparent .5em, transparent 1.5em);

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

Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются в большинстве браузеров.

Сочетая несколько фонов с разными параметрами можно получить удивительные вещи:

See the Pen Rounds by yoksel (@yoksel) on CodePen.

See the Pen Circles by yoksel (@yoksel) on CodePen.

Если при создании узоров использовать относительные единицы (em, %), а не абсоюлютные (px), размер получившихся паттернов потом можно будет легко регулировать изменяя только размер шрифта.

Если вы заинтересовались кодом паттернов, я бы советовала попробовать повторить узор не подглядывая в исходники, это полезно : )