CSS-генератор градиентов: линейный и радиальный

Что такое Gradient Generator?

Gradient Generator — это браузерный визуальный редактор для создания CSS-градиентов (линейных, радиальных и конических) с несколькими цветовыми стопами и настраиваемыми параметрами. Инструмент выводит готовый к продакшену CSS, который можно скопировать в любую таблицу стилей. Предпросмотр обновляется в реальном времени при каждом изменении, устраняя необходимость переключаться между редактором и инструментами разработчика. Дизайнеры используют его для прототипирования градиентных фонов и генерации точного CSS; разработчики — для экспорта SVG-файлов с градиентами для масштабируемых ресурсов.

Основные возможности

• Линейный, радиальный и конический градиенты — три различных типа, выбираемых одним кликом. Каждый тип выводит правильную CSS-функцию: linear-gradient(), radial-gradient() или conic-gradient().
• Несколько цветовых стопов с позициями — добавляйте столько стопов, сколько нужно. У каждого есть палитра цветов, hex-ввод и слайдер позиции от 0% до 100%. Минимум — два стопа; при попытке удалить последние два инструмент показывает тост с ошибкой.
• Настройка угла градиента — ползунок управляет углом от 0° до 360° для линейного и конического типов. Угол встраивается прямо в CSS-вывод.
• Генерация CSS в реальном времени — карточка CSS-вывода обновляется мгновенно при каждом изменении. Формат вывода: background: linear-gradient(90deg, #8E2DE2 0%, #4A00E0 100%); — готово для вставки.
• Мгновенный предпросмотр градиента — панель предпросмотра высотой 256px в верхней части инструмента отображает градиент в реальном времени с использованием актуального CSS-значения как встроенного стиля.
• Копирование CSS одним кликом — кнопка «Скопировать CSS» копирует полное объявление background: ...; в буфер обмена и записывает запись в историю.
• Поддержка повторяющихся градиентов — отдельный элемент управления пока не предусмотрен, но CSS-вывод можно вручную изменить, заменив linear-gradient на repeating-linear-gradient.
• Совместимый с браузерами CSS — генерируемый CSS использует стандартный синтаксис без префиксов, поддерживаемый всеми современными браузерами.

Как использовать Gradient Generator

Шаг 1: Выберите тип градиента

Перейдите в Скоро: Gradient Generator. Инструмент открывается с линейным градиентом по умолчанию — от #8E2DE2 (фиолетовый) при 0% до #33FFDD (ярко-бирюзовый) при 100%, под углом 90 градусов.

В карточке Тип градиента нажмите одну из трёх кнопок: Линейный, Радиальный или Конический. Предпросмотр обновится немедленно. Для линейного и конического типов под селектором типа появится слайдер угла.

Шаг 2: Установите угол (только для линейного и конического)

Перетащите ползунок Угол в диапазоне от 0 до 360 градусов. Текущее значение угла отображается в виде метки (например, Угол: 135°). 0° — сверху вниз, 90° — слева направо, 180° — снизу вверх, 270° — справа налево. Предпросмотр обновляется при каждом движении ползунка.

Для радиальных градиентов элемент управления углом скрыт, так как radial-gradient(circle, ...) не использует параметр угла.

Шаг 3: Настройте цветовые стопы

Карточка Цветовые стопы отображает каждый стоп в виде строки, содержащей:

• Нативный ввод цвета (цветной квадрат) — нажмите для открытия палитры цветов браузера
• Текстовый ввод hex с текущим значением цвета
• Слайдер позиции от 0 до 100%
• Метку процента позиции (например, 45%)
• Кнопку удаления (значок корзины)

Ввод цвета и hex-ввод оба обновляют один и тот же стоп. Изменение любого из них немедленно обновляет предпросмотр.

Нажмите Добавить стоп, чтобы вставить новый цветовой стоп в случайную позицию с белым цветом по умолчанию. Отредактируйте цвет и позицию, чтобы разместить его там, где нужно.

Шаг 4: Удалите цветовой стоп

Нажмите значок корзины в любой строке стопа, чтобы удалить его. Если осталось только два стопа, нажатие корзины покажет сообщение об ошибке «Необходимо минимум 2 цветовых стопа» в виде тоста и сохранит оба стопа.

Шаг 5: Скопируйте CSS-вывод

Карточка CSS-вывод показывает полное объявление:

background: linear-gradient(90deg, #8e2de2 0%, #33ffdd 100%);

Нажмите Скопировать CSS, чтобы скопировать эту строку в буфер обмена. Тост об успехе подтвердит копирование. Запись также фиксируется на панели истории (для аккаунтов поддержки) с типом градиента, углом и CSS-значением.

Шаг 6: Экспортировать как SVG (функция для поддержки)

Нажмите кнопку SVG (со значком загрузки), чтобы экспортировать градиент в виде SVG-файла. Для линейных градиентов SVG использует элемент <linearGradient> с атрибутом gradientTransform="rotate(angle, 0.5, 0.5)". Для радиальных — <radialGradient>. Файл скачивается как gradient.svg. Это премиум-функция для поддержки.

Шаг 7: Рандомизация или сброс

Нажмите Рандомизировать (значок кругового стрелки), чтобы сгенерировать новый градиент с двумя случайными цветами и случайным углом. Нажмите Очистить, чтобы сбросить градиент до линейного фиолетово-бирюзового по умолчанию под углом 90°.

Практические примеры

Фоновый градиент для hero-секции

Нужен диагональный градиент 135° от #667EEA (средний сине-фиолетовый) до #764BA2 (тёмно-пурпурный) для hero лендинга. Установите тип Линейный, перетащите ползунок угла на 135, измените стоп 1 на #667EEA при 0% и стоп 2 на #764BA2 при 100%. Нажмите «Скопировать CSS» и вставьте:

.hero {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}

Эффект радиального прожектора

Нужен радиальный градиент, освещающий центр карточки. Установите тип Радиальный. Измените стоп 1 на #FFFFFF при 0%, добавьте третий стоп при 50% с #F1F5F9 и установите стоп 2 (теперь стоп 3) на #CBD5E1 при 100%. Вывод:

background: radial-gradient(circle, #FFFFFF 0%, #F1F5F9 50%, #CBD5E1 100%);

Используйте как тонкий эффект глубины на белых поверхностях карточек.

Предпросмотр конического цветового колеса

Установите тип Конический и угол 0°. Добавьте шесть равномерно расположенных стопов: красный (#FF0000) при 0%, жёлтый (#FFFF00) при 17%, зелёный (#00FF00) при 33%, голубой (#00FFFF) при 50%, синий (#0000FF) при 67% и пурпурный (#FF00FF) при 83%. Последний стоп естественно замыкается на красном. Экспортируйте как SVG, чтобы использовать колесо в диаграмме теории цвета.

Советы и лучшие практики

Цветовые стопы сортируются по позиции перед генерацией CSS. Добавляйте стопы в любом порядке — инструмент всегда сортирует их по возрастанию перед записью вывода. Перетаскивание стопа 0% за стоп 50% на ползунке корректно переупорядочит CSS.

Используйте кнопку «Рандомизировать» для творческих отправных точек. Рандомизатор генерирует два случайных hex-цвета и случайный угол. Кликайте повторно, пока не найдёте палитру, достойную доработки, затем вручную скорректируйте цвета.

Вставьте существующий градиент для реверс-инжиниринга. Инструмент пока не поддерживает прямую вставку строки CSS-градиента. Однако можно извлечь значения цветовых стопов из существующего градиента и ввести их вручную.

Общие URL кодируют все параметры градиента. Тип градиента, угол и цветовые стопы (в виде компактной строки цвет:позиция) сериализуются в URL страницы. Скопируйте URL, чтобы поделиться точной конфигурацией градиента с коллегой.

SVG-экспорт использует холст 400×200px. Экспортируемый gradient.svg имеет width="400" height="200" и элемент <rect>, заполняющий весь холст градиентом. Масштабируйте свободно, так как SVG не зависит от разрешения.

Минимум двух стопов обеспечивается тост-сообщением. При попытке удалить стоп, когда их осталось только два, тост с ошибкой показывает «Необходимо минимум 2 цветовых стопа» — градиенту нужно хотя бы два стопа для корректного CSS.

Распространённые проблемы и их решение

CSS-вывод показывает background: ; (пустой градиент). При нормальном использовании это не должно происходить. Если массив цветовых стопов пуст (возможно только при повреждении состояния URL), функция generateCss возвращает пустую строку. Очистите инструмент кнопкой «Сброс» или перезагрузите страницу для восстановления состояния по умолчанию.

Hex-ввод цветового стопа показывает неверный цвет после ввода. Hex-ввод напрямую связан со значением цвета стопа. При вводе некорректного hex (например, #ZZZZZZ) ввод палитры цветов не обновится и может показывать предыдущий корректный цвет. Исправьте hex на допустимое шестизначное значение.

Ползунок позиции сложно точно настроить. Ползунок принимает значения с шагом 1%. Для точного позиционирования введите процент напрямую — однако текущий интерфейс использует только ползунок. Используйте ближайшие круглые числа и проверяйте в CSS-выводе.

Радиальный градиент выглядит смещённым. Генерируемый радиальный градиент использует radial-gradient(circle, ...), центрируемый по умолчанию в 50% 50%. Добавление circle at X% Y% в интерфейсе пока недоступно. Отредактируйте скопированный CSS вручную в таблице стилей, чтобы переместить центр.

SVG-экспорт показывает только линейный или радиальный. Функция SVG-экспорта обрабатывает линейный градиент как <linearGradient>, а все остальные типы (включая конический) — как <radialGradient>. Конические градиенты не имеют SVG-аналога, поэтому в SVG-экспорте они преобразуются в радиальные.

Восстановление из истории восстанавливает состояние лишь частично. Функция восстановления из истории разбирает тип градиента и угол из текста сохранённой записи. Цветовые стопы из истории не восстанавливаются (они сохраняются в состоянии общего URL). Для полного восстановления состояния используйте ссылку для совместного доступа.

Конфиденциальность и безопасность

Gradient Generator полностью работает в вашем браузере. Генерация CSS, управление цветовыми стопами и логика SVG-экспорта — это чистый JavaScript. Никакие конфигурации градиентов, значения цветов или данные об использовании не отправляются на внешние серверы. SVG-экспорт использует downloadText для записи локального файла — никаких загрузок на сервер не происходит. Инструмент работает полностью в офлайн-режиме после загрузки страницы и безопасен для использования с проприетарными или ещё не выпущенными дизайн-ресурсами.

Часто задаваемые вопросы

Является ли Gradient Generator бесплатным?

Да. Все основные функции — создание линейных, радиальных и конических градиентов, несколько цветовых стопов, управление углом, копирование CSS и рандомизация — бесплатны без необходимости создавать аккаунт. Кнопка SVG-экспорта является премиум-функцией для поддержки, требующей подписки поддержки Ko-fi.

Работает ли Gradient Generator офлайн?

Да. После загрузки страницы все функции генерации градиентов, рендеринга предпросмотра и вывода CSS работают без доступа к интернету. Единственные функции, зависящие от интернета, — это первоначальная загрузка страницы и общий URL, который кодирует состояние в самом URL (вызов сервера для чтения состояния не требуется).

Безопасны ли мои данные в Gradient Generator?

Да. Никакие параметры градиента и значения цветов не передаются на серверы. У инструмента нет бэкенда для генерации градиентов. Ваши дизайны остаются полностью на вашем устройстве. Общий URL кодирует состояние в самой строке URL — ни один сервер его не хранит.

Какие типы CSS-градиентов поддерживает инструмент?

Инструмент поддерживает три типа CSS-градиентов: linear-gradient(), radial-gradient() и conic-gradient(). CSS-вывод использует стандартный синтаксис без префиксов. По совместимости с браузерами: linear-gradient и radial-gradient работают во всех современных браузерах; conic-gradient требует Chrome 69+, Safari 12.1+ и Firefox 83+.

Как создать градиент с несколькими стопами?

Нажмите Добавить стоп, чтобы вставить дополнительные цветовые стопы. Каждый новый стоп появляется в случайной позиции с белым цветом по умолчанию. Нажмите на образец цвета или введите hex-значение для установки цвета, затем перетащите ползунок позиции для размещения. Верхнего предела количества стопов нет.

Можно ли удалить цветовой стоп?

Да. Нажмите на значок корзины в любой строке стопа. Если остаётся только два стопа, инструмент предотвращает удаление и показывает тост: «Необходимо минимум 2 цветовых стопа.» Корректный CSS-градиент требует хотя бы двух цветовых стопов.

Что содержит экспортируемый SVG-файл?

SVG-экспорт создаёт файл 400×200px с блоком <defs>, содержащим <linearGradient> (для линейного типа) или <radialGradient> (для радиального и конического типов), и элементом <rect>, заполняющим весь холст этим градиентом. Файл называется gradient.svg и скачивается автоматически.

Можно ли использовать сгенерированный CSS в Tailwind CSS?

Да. Вставьте значение linear-gradient(...) (без префикса background:) в конфигурацию Tailwind как пользовательское фоновое изображение:

backgroundImage: {
  'brand-gradient': 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)',
}

Затем используйте как bg-brand-gradient в вашем HTML.

Поддерживает ли инструмент прозрачные цветовые стопы?

Ввод цветов принимает только непрозрачные hex-значения (6 цифр). Чтобы создать градиент с прозрачностью, скопируйте CSS-вывод и вручную измените цвета стопов на нотацию rgba() в вашей таблице стилей, например: linear-gradient(90deg, rgba(142, 45, 226, 0) 0%, #4A00E0 100%).

Как поделиться градиентом с кем-то?

Скопируйте URL из адресной строки браузера после настройки градиента. URL кодирует тип градиента, угол и все значения цветовых стопов. Открытие этого URL на другом устройстве загружает точно такой же градиент. Также можно использовать кнопки «Поделиться» внизу страницы для публикации в Twitter, LinkedIn, Reddit или прямого копирования ссылки.

Связанные инструменты

• Скоро: UI Gradients — просматривайте кураторскую библиотеку именованных градиентов и копируйте их CSS-значения напрямую.
• Color Picker — используйте EyeDropper или поля ввода форматов для поиска точных hex-цветов перед добавлением их в качестве стопов градиента.
• Скоро: Color Blender — генерируйте плавные промежуточные цвета между двумя значениями — полезно для ручного планирования многостоповых градиентов.
• Скоро: Palette Generator — создавайте гармоничные цветовые палитры для использования в качестве источников стопов градиента.

Попробуйте Gradient Generator прямо сейчас: Скоро: Glyph Widgets Gradient Generator