Некоторые способы настройки формы радиального градиента:
- Эллиптическая форма. metanit.com Задаётся с помощью ключевого слова ellipse. metanit.com Форма эллипса зависит от соотношения сторон элемента, к которому применяется градиент. skillbox.ru
- Круговая форма. metanit.com Для этого используется ключевое слово circle. metanit.com Форма круга от соотношения сторон не зависит. skillbox.ru
Если форма не задана, но задан размер, то одно значение задаёт радиус круга, если значений два — градиент получает форму эллипса. css.yoksel.ru При наличии размеров явное задание формы градиента игнорируется. css.yoksel.ru
Также можно использовать ключевые слова для задания размера конечной формы градиента: doka.guide
- closest-side — градиент заканчивается у границы элемента, ближайшей к центру градиента; css.yoksel.ru
- farthest-side — градиент заканчивается у дальней границы элемента; css.yoksel.ru
- closest-corner — конечная фигура растягивается таким образом, чтобы она проходила через угол элемента, ближайший к центру градиента; css.yoksel.ru
- farthest-corner — аналогично closest-corner, только конечная фигура проходит через угол, дальний от центра градиента. css.yoksel.ru