Создавайте stunning линейные, радиальные и конические градиенты в визуальном редакторе. Добавляйте точки цвета и мгновенно генерируйте CSS-код.
Выберите линейный, радиальный или конический кнопками типа градиента. Предпросмотр обновляется мгновенно.
Используйте палитру цветов и ползунки позиций для задания цветов. Нажмите «Добавить точку» для новых цветов или значок корзины для удаления. Меняйте порядок остановок стрелками вверх/вниз.
Для линейных и конических градиентов перетащите ползунок угла (0°–360°), чтобы управлять направлением градиента. Радиальные градиенты не используют угол.
Нажмите «Скопировать CSS», чтобы скопировать свойство background в буфер обмена, или экспортируйте градиент в SVG-файл. Также можно использовать кнопки «Поделиться», чтобы отправить ссылку, воспроизводящую ваш градиент.
Нажмите «Случайный» для генерации случайного двухцветного градиента со случайным углом или «Очистить» для сброса всех настроек к значениям по умолчанию.
Каждая цветовая остановка задаёт цвет и позицию от 0% до 100%. Браузер вычисляет плавные переходы между соседними остановками согласно спецификации CSS-градиентов. Можно добавить сколько угодно остановок для создания сложных многоцветных эффектов.
Инструмент генерирует CSS linear-gradient() с выбранным углом. Цвета смешиваются по прямой линии от начальной до конечной точки. Изменение угла поворачивает направление градиента.
Радиальные градиенты используют radial-gradient(circle) для создания круговых цветовых переходов от центра наружу. Конические градиенты используют conic-gradient() для вращения цветов вокруг центральной точки, начиная с заданного угла — полезно для круговых диаграмм, цветовых колёс и декоративных эффектов.
При экспорте в SVG инструмент преобразует цветовые остановки в SVG-элементы градиента (linearGradient или radialGradient) и упаковывает их в автономный SVG-файл, который можно использовать в инструментах дизайна или встроить в веб-страницы.
Тип градиента, угол и цветовые остановки кодируются в URL страницы. Поделившись этим URL, вы позволяете любому открыть точно такой же градиент в браузере без необходимости создавать его вручную.
Можно создать три типа: линейные градиенты, смешивающие цвета вдоль прямой линии, радиальные градиенты, расходящиеся от центральной точки по кругу, и конические градиенты, вращающие цвета вокруг центральной точки подобно цветовому кругу.
Сохранённые настройки — функция для спонсоров.
История инструментов — функция для спонсоров.
Заметки к инструментам — функция для спонсоров.
