Gradient Generator

linear-gradient создаёт градиент вдоль прямой линии под заданным углом (или to top, to bottom right). radial-gradient распространяется от центральной точки круга или эллипса. Linear подходит для фонов страниц и кнопок, radial — для сферических эффектов и подсветки.

conic-gradient рисует градиент вокруг центральной точки, как цветовой круг. Удобен для диаграмм, цветовых палитр, конических эффектов (например, «солнечные лучи»). Поддержка в браузерах хорошая, кроме старых IE.

Добавьте несколько color-stop в gradient: linear-gradient(90deg, red 0%, yellow 25%, green 50%, blue 100%). Процент или длина задают позицию каждого цвета. Без указания позиции браузер распределит остановки равномерно.

Да. Укажите несколько градиентов через запятую в background-image. Первый в списке отображается поверх остальных. Используйте background-size и background-position, чтобы расположить их в разных зонах. Полезно для сложных фонов.

repeating-linear-gradient, repeating-radial-gradient и repeating-conic-gradient повторяют градиент, пока не заполнят область. Задайте длину цикла через color-stop: repeating-linear-gradient(90deg, red 0px, blue 20px) создаст полоски каждые 20px.