Для создания сложных градиентных изображений с использованием CSS можно комбинировать несколько градиентов через свойство background-image, перечисляя их через запятую. 1 При наложении градиенты располагаются слоями: первый указанный градиент находится сверху, последующие — под ним. 1

Некоторые возможности создания градиентов с помощью CSS:

• Линейный градиент. 35 Функция linear-gradient() формирует изображение из двух или более цветов, постепенно изменяя их. 5 Направление градиента можно задать через ключевые слова, угол в градусах или комбинированные значения. 1
• Радиальный градиент. 5 Функция radial-gradient() создаёт градиент, который излучает по кругу. 5 Вместо указания угла можно задать позицию и конечную форму. 5
• Конический градиент. 35 Функция conic-gradient() имеет центральную точку в блоке, начинается сверху (по умолчанию) и идёт по кругу в 360 градусов. 5

Любому градиенту можно задавать точки остановки, в которых цвета будут «чистыми», без примесей других. 3 Таким образом можно делать более резкие и плавные переходы. 3

Для оптимизации производительности рекомендуется ограничивать количество наложенных градиентов до 3–4 слоёв. 1 При необходимости большего числа слоёв можно использовать CSS-маски или SVG. 1