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

Как пользоваться

1. Градиент уже на экране при открытии страницы — для первого результата кликать не нужно.
2. Выберите тип: «Линейный» идёт вдоль угла, «Радиальный» расходится от круга, «Конический» заметает вокруг центра. Угол меняется ползунком для линейного и конического.
3. Задайте цвета образцами и перетащите каждую позицию (0–100%). Добавляйте цвета кнопкой «+ Добавить цвет», если нужен градиент из нескольких точек; удалять можно до двух.
4. CSS обновляется на лету ниже — скопируйте его одним кликом и вставьте куда угодно, где принимают CSS.

Область применения, ограничения и частые вопросы

• Только непрозрачные цвета: образцы — это элементы выбора цвета браузера, они не показывают alpha. Для прозрачности сначала переведите цвет в форму с alpha, затем вернитесь.
• Только один стандартный сегмент: линейный, радиальный или конический — без префиксов -webkit-, без слоёв и нескольких фонов, без настройки размера и центра радиального градиента.
• Точки сохраняют порядок добавления — они не сортируются автоматически, поэтому позиция не по порядку намеренно даёт резкий переход.
• От 2 до 8 точек. При одной точке градиент останавливается (с уведомлением), а не имитируется.
• Нет библиотеки пресетов, применения фона на всю страницу и ссылки, содержащей градиент: кнопка «Поделиться» делится только адресом страницы; ничего не загружается, не сохраняется и не пишется в URL.
• Угол не имеет смысла для радиальных градиентов, поэтому управление углом скрывается, и в коде нет угла.