Генератор CSS-градиентов
Создавайте красивые линейные, радиальные и конические CSS-градиенты с живым предпросмотром и копируйте код в один клик
Живой предпросмотр
Тип градиента
Цветовые точки
Пресеты
CSS-код
background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);Всё генерируется локально в вашем браузере. Ничего не отправляется на сервер.
Об этом инструменте
Этот генератор CSS-градиентов позволяет визуально создавать плавные переходы цветов и копировать готовый к вставке CSS в один клик. Выберите линейный, радиальный или конический градиент, добавьте сколько угодно цветовых точек и настройте цвет каждой точки нативным выбором цвета или полем HEX, а также позицию от 0 до 100 процентов. Для линейных градиентов можно задать любой угол от 0 до 360 градусов или использовать быстрые кнопки направления; радиальные градиенты поддерживают форму круга или эллипса, а конические вращают цвета вокруг центральной точки. Большой живой предпросмотр обновляется мгновенно, так что вы точно видите то, что создаёте. Начните с одного из подобранных пресетов, нажмите кнопку случайного варианта для новых идей, затем скопируйте сгенерированное свойство background в свою таблицу стилей. Всё работает локально в браузере, поэтому быстро, приватно и работает без интернета.
Как пользоваться
- 1 Выберите тип градиента — линейный, радиальный или конический.
- 2 Добавьте цветовые точки, затем задайте цвет каждой точки (выбор или HEX) и её позицию от 0 до 100%.
- 3 Настройте угол для линейных и конических градиентов или форму для радиальных — либо загрузите пресет.
- 4 Следите за живым предпросмотром, затем нажмите «Копировать CSS», чтобы вставить свойство background в проект.
Как это работает
Инструмент составляет стандартную функцию CSS-градиента из ваших настроек. Линейные градиенты используют linear-gradient(угол, точки), где угол направляет линию градиента, а каждая цветовая точка записывается как цвет с позицией в процентах. Радиальные градиенты используют radial-gradient(форма at center, точки), чтобы рассеивать цвета от центра наружу, а конические используют conic-gradient(from угол at center, точки), чтобы вращать цвета вокруг точки. Перед выводом цветовые точки автоматически сортируются по позиции, поэтому порядок их добавления не важен. Позиции ограничены диапазоном 0-100%, и всегда сохраняется минимум две точки, так что сгенерированный CSS всегда корректен. Результат — это простое объявление background, которое можно вставить в любой современный браузер без префиксов.
Часто задаваемые вопросы
В чём разница между линейными, радиальными и коническими градиентами?
Линейный градиент смешивает цвета вдоль прямой линии, направление которой вы задаёте углом. Радиальный градиент рассеивает цвета от центральной точки наружу кругом или эллипсом. Конический градиент вращает цвета вокруг центральной точки, что удобно для круговых диаграмм, цветовых кругов и угловых эффектов. Все три — нативный CSS и поддерживаются всеми современными браузерами.
Сколько цветовых точек можно добавить?
Вы можете добавить столько цветовых точек, сколько нужно; инструмент всегда сохраняет минимум две, чтобы градиент оставался корректным. У каждой точки свой цвет и позиция от 0 до 100 процентов. Добавление новых точек позволяет создавать радуги, многоцветные фоны и плавные многоцветные переходы.
Что делает управление углом?
Для линейного градиента угол задаёт направление цветовой линии: 0 градусов указывает вверх, 90 — вправо, 180 — вниз, 270 — влево, так что вы можете направить переход в любую сторону. Для конического градиента угол задаёт начальный поворот развёртки. Можно перетаскивать ползунок, ввести точное значение или использовать быстрые кнопки направления.
Готов ли сгенерированный CSS к использованию в продакшене?
Да. Вывод — это стандартное свойство background с нативными функциями градиента, которые работают во всех актуальных браузерах без вендорных префиксов. Просто скопируйте строку и вставьте её в таблицу стилей, инлайн-стиль или компонент. Можно сменить имя свойства на background-image, если хотите сохранить отдельный цвет фона.
Отправляются ли мои данные куда-либо?
Нет. Весь генератор работает в вашем браузере на JavaScript и CSS. Ничего о ваших цветах или градиентах не загружается и не хранится на сервере, поэтому инструмент приватен и продолжает работать, даже если вы отключитесь от интернета.
Связанные инструменты и применение
Сочетайте генератор градиентов с конвертером цветов, чтобы выбирать точные значения HEX, RGB и HSL, и с проверкой контраста, чтобы текст оставался читаемым поверх вашего градиента. Дизайнеры и разработчики используют его для создания главных фонов, кнопок, карточек, бейджей и декоративных эффектов для сайтов и приложений.