Найти тему
GoToWeb

Создание сайтов с нуля - урок 25 - Радиальный градиент на CSS

Стандартное (минимизированное) использование радиального градиента: background: radial-gradient (red, blue).

Начальный цвет – в центре градиента, конечный – по краям.

Положение центра градиента можно изменить: background: radial-gradient (at 30px 100px, red, blue). При этом, 30 – отступ слева, 100 – слева.

Положение центра градиента также можно задавать в процентах или при помощи ключевых слов: top, bottom, left, right, center.

Задание размера градиента: background: radial-gradient (red 0px, red 20px, blue 60px, blue 100px).

Переходов цветов в градиенте может быть сколько угодно.

Форма градиента по умолчанию эллиптическая – ellipse. Еще есть круглая – circle. Задается первым параметром.

Тип градиента можно изменить при помощи ключевых слов: closest-side, closest-corner, farthest-side, farthest-corner.

Если задается тип, форма и положение – между ними запятую не ставим. Также параметры нельзя менять местами.

Можно одновременно использование линейный и радиальный градиенты.