Обложка канала

Frontend разработчик

12650 @frontend_1

Frontend разработчик. Библиотека электронных книг и статей для frontend разработчиков.

Frontend разработчик

4 года назад
Открыть в
Как создать радиальный градиент в 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 — центр градиента в верхнем левом углу. #css