​Как создать радиальный градиент в CSS?

1 мин
Автор PINTA IT
​Как создать радиальный градиент в CSS?

Как создать радиальный градиент в CSS?

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

Самый простой градиент задаётся двумя цветами.

.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}

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

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

Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left центр градиента в верхнем левом углу.

Похожие публикации