Некоторые способы создания градиента в CSS:

1. Линейный градиент (linear-gradient). 12 Создаётся с помощью функции linear-gradient(), которой нужно передать несколько цветов для узора. 1 По умолчанию градиент будет направлен сверху вниз. 1 Направление можно изменить, указав угол или ключевые слова. 1
2. Радиальный градиент (radial-gradient). 12 Задаётся функцией radial-gradient(). 1 Отличается от линейного тем, что цвет выходит из одной точки и «расплывается» к краям. 1 По умолчанию радиальный градиент эллипсоидный и расходится из центра. 1 Можно настроить форму, размер и координаты центральной точки. 1
3. Конический градиент (conic-gradient). 1 Создаётся с помощью функции conic-gradient(). 1 В нём цвета не исходят из начальной точки, а как бы «обёрнуты» вокруг неё. 1 По умолчанию начальная точка находится по центру, а движение начинается от линии с углом ноль градусов. 1

Также для создания повторяющихся градиентов можно использовать функции repeating-linear-gradient(), repeating-radial-gradient() и repeating-conic-gradient(). 2