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

Задайте свойство background (или background-image) с функцией градиента. Проще всего — двухцветный линейный градиент: background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — это рисует переход слева направо от индиго к розовому. Выберите цвета и угол в инструменте выше, затем скопируйте готовую строку background прямо в таблицу стилей. Синтаксис не нужно писать вручную — генератор строит его по мере перетаскивания точек остановки.

linear-gradient переходит между цветами по прямой линии под заданным углом (например, 90deg — слева направо). radial-gradient расходится от центральной точки кругами или эллипсами, как прожектор. conic-gradient вращает цвета вокруг центральной точки, как стрелки часов, — это идеально для цветовых кругов и круговых диаграмм. Данный инструмент поддерживает все три типа; переключайтесь кнопками «Линейный / Радиальный / Конический». Большинство бесплатных генераторов градиентов, например генератор фонов Canva, поддерживают только линейные градиенты, а cssgradient.io вообще не поддерживает конические.

Примените градиент к свойству background любого элемента. Для полностраничного фона попробуйте: body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }. Поскольку градиент считается изображением, можно также добавить background-attachment: fixed;, чтобы фон оставался на месте при прокрутке страницы. Создайте градиент визуально в инструменте выше и скопируйте CSS. Figma, Canva и другие дизайн-инструменты не нужны. Работает одинаково во всех современных браузерах без префиксов.

Добавьте дополнительные точки остановки, каждая со своей позицией. Кликните в любом месте на полосе градиента (или нажмите кнопку «+ Добавить точку»), чтобы создать новую точку, затем перетащите её куда нужно. Три цвета выглядят так: linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%). Ограничений по количеству нет — добавляйте столько точек, сколько требует дизайн. В отличие от coolors.co, который показывает только палитры без реального CSS, или Canva, которая прячет редактирование градиентов за авторизацию, здесь сразу генерируется production-готовый CSS с любым числом точек.

Для линейного градиента первое значение — угол: 0deg означает вверх, 90deg — вправо, 180deg — вниз, 270deg — влево. Можно также использовать ключевые слова, например «to right» или «to bottom right», — linear-gradient(to right, ...) идентично linear-gradient(90deg, ...). Перетащите слайдер угла или нажмите стрелку направления в инструменте — значение обновится сразу. Выходной CSS обновляется в реальном времени, так что можно скопировать и вставить его в любую таблицу стилей или фреймворк.

В 2026 году — нет. linear-gradient, radial-gradient и conic-gradient поддерживаются без префиксов во всех современных браузерах, поэтому достаточно просто написать background: linear-gradient(...). Префикс -webkit- нужен только для очень старых версий Safari/iOS (до 2017 года) или устаревшего Android WebView. Включите «Добавить префикс -webkit-» в настройках вывода CSS, и инструмент добавит правильно преобразованную строку запасного варианта перед стандартной. Преобразование угла (90deg становится 270deg в webkit-версии) выполняется автоматически.

Используйте утилиты градиента: класс направления и цвета from-, via- и to-, например bg-gradient-to-r from-indigo-500 to-pink-500. Для точных цветов используйте произвольные значения: bg-gradient-to-r from-[#6366f1] to-[#ec4899]. Переключите вывод на вкладку Tailwind, чтобы скопировать классы для текущего градиента, включая произвольное значение bg-[linear-gradient(...)] для радиальных и конических градиентов, для которых у Tailwind нет именованного сокращения. Большинство материалов по Tailwind-градиентам не освещают этот краевой случай.

Нажмите «Скачать PNG». Инструмент рисует ваш градиент на HTML canvas в размере 1600×900 и сохраняет его как .png — идеально для фона презентации, баннера для соцсетей или макета дизайна. Рендеринг происходит полностью в вашем браузере, ничего не загружается. В отличие от TinyWow, которому нужна загрузка файла на сервер, или Adobe Express, где экспорт PNG спрятан за платную подписку, здесь нет ни рисков для конфиденциальности, ни затрат. Нужен другой размер? Масштабируйте или обрежьте PNG в любом графическом редакторе.

Нажмите «Из изображения» и выберите фото. Инструмент считывает пиксели локально, находит наиболее распространённые цвета и создаёт из них градиент — это быстрый способ подобрать цвета под брендовое фото или снимок продукта. Изображение никогда не покидает ваше устройство: анализ происходит в браузере, и данные сразу удаляются. В отличие от Adobe Color или Coolors, которым нужна загрузка файла или аккаунт для извлечения палитр, здесь всё остаётся приватным на вашем устройстве. Затем вы можете скорректировать извлечённые точки остановки, изменить угол или переключиться на радиальный или конический тип.

Конический градиент вращает цвета вокруг центральной точки, а не вдоль линии, — переход разворачивается, как стрелка часов. conic-gradient(from 0deg, red, yellow, green, blue, red) создаёт полный цветовой круг. Они идеально подходят для круговых диаграмм, кольцевых диаграмм, индикаторов прогресса, выбора цвета и угловых световых эффектов. Поддержка браузерами стабильна с 2021 года во всех актуальных версиях Chrome, Firefox, Safari и Edge без префиксов. Выберите «Конический» выше, задайте начальный угол и позицию центра и экспериментируйте. Большинство генераторов градиентов вообще не поддерживают конический тип.

Задайте точке остановки значение альфа-канала. Снизьте слайдер «Прозрачность» на точке остановки, и CSS переключится на rgba(). Например, linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) даёт переход от прозрачного до 60% чёрного — классическая затемняющая плашка под текстом на фотографии. Совет: делайте переход между одним и тем же цветом (от прозрачного до насыщенного одного оттенка), чтобы избежать грязного серого оттенка в середине, который браузеры создают при переходе между двумя разными полностью прозрачными цветами. Инструмент автоматически формирует rgba-вывод при изменении прозрачности точки.

Генератор градиентов UtiloKit охватывает всё, что умеют эти инструменты, — линейный, радиальный и конический типы, редактор с несколькими точками остановки, копирование кода, — плюс вывод для Tailwind CSS, скачивание PNG, извлечение градиента из изображения, ссылки для совместного доступа и поддержка анимированных градиентов. cssgradient.io не поддерживает конические градиенты и не выводит Tailwind. Редактор градиентов Colorzilla — это расширение для браузера, которое не экспортирует PNG и не поддерживает Tailwind. Здесь всё работает в браузере без загрузок, без регистрации и без рекламы, скрывающей функции.

Да. Инструмент полностью адаптивен и работает в любом современном мобильном браузере. Откройте его в Safari на iPhone или Chrome на Android, создайте градиент и скопируйте CSS прямо в буфер обмена. Поскольку всё выполняется на стороне клиента, ничего скачивать не нужно, и он работает даже при медленном мобильном соединении после загрузки страницы. Редактор точек остановки адаптирован под сенсорный ввод, так что создавать многоточечные градиенты на телефоне вполне удобно.