Генератор CSS-градиентов

Как сделать CSS-градиент

1. Выберите тип: линейный идёт по прямой под заданным углом, радиальный расходится кругом от центра, а конический поворачивается вокруг центра начиная с заданного угла.
2. Измените каждый цвет и передвиньте его ползунок, чтобы задать позицию от 0% до 100%. «Добавить цвет» ставит новый в самый широкий промежуток, до шести; ✕ удаляет цвет.
3. Или нажмите готовый набор, чтобы начать с него. Предпросмотр меняется сразу; «Копировать CSS» копирует строки для вашей таблицы стилей.

Частые вопросы

Зачем две строки background?

Первая — сплошной цвет для редкого браузера, который не умеет рисовать градиенты; во всех остальных её перекрывает вторая.

Что означает угол?

В линейном градиенте 0deg идёт снизу вверх, 90deg — слева направо, 180deg — сверху вниз. В коническом это место, где начинается первый цвет, по часовой стрелке от верха.

Можно ли применить градиент к тексту или рамке?

Да. Для текста задайте его фоном и добавьте background-clip: text и color: transparent. Для рамки используйте его в border-image вместе с border-image-slice: 1.