Frontend Formula

radial-gradient()



Функция используется для задания фона в виде радиального (кругового, эллиптического) градиента.



Радиальный градиент начинается в точке и расходится от неё подобно кругам на воде. Форма по умолчанию — эллипс, который заполняет всю площадь элемента.



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

Задаётся ключевым словом circle или ellipse.



Положение центра

Используются следующие ключевые слова: at left, at top, at right, at bottom, at center. Значения можно сочетать.



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

👉 closest-side — Заканчивается у ближайшей к центру границы элемента.

👉 farthest-side — Заканчивается у дальней от центра границы элемента.

👉 closest-corner — Край проходит через ближайший к центру угол.

👉 farthest-corner — Край будет проходить через дальний от центра угол.



На практике

Радиальным градиентам можно задавать резкие переходы между цветами. Совместно со свойством background-repeat можно генерировать различные паттерны.



Статья: https://doka.guide/css/radial-gradient/



#css #дока



👉 @frontend_formula