Большинство генераторов градиента дают только строку CSS-кода. Этот инструмент рисует градиент на настоящем canvas и позволяет скачать готовый PNG в точном пикселе размере, который вам нужен - обои для телефона, фон рабочего стола 1920x1080, квадратный пост для соцсети или произвольные размеры. Ничего не загружается на сервер: изображение создаётся и сохраняется полностью на вашем устройстве, так что цвета и файлы остаются приватными.
Бесплатный генератор градиента
Работает прямо в браузере - без загрузки файлов и регистрации.
Тип
Размер изображения
px
Точки перехода
Сохраняет настоящий PNG размером 1920×1080 px
Что такое генератор градиента?
Генератор градиента - это инструмент, который смешивает два и более цвета в плавный переход и сохраняет его в виде изображения для скачивания. Выберите цвета и точки перехода, задайте линейный или радиальный тип, укажите размер и сохраните PNG для обоев, фона, баннера или превью. Всё работает прямо в браузере.
Как пользоваться
- 1Выберите линейный или радиальный тип. Линейный смешивает цвета вдоль прямой линии под заданным углом; радиальный распространяет их от центра наружу в виде круга.
- 2Задайте цвета и точки перехода. Кликните по образцу, чтобы выбрать цвет, и перетащите ползунок, чтобы сдвинуть точку. Добавьте до 8 точек или уберите до 2, а кнопка «Случайно» подскажет быструю идею.
- 3Выберите размер изображения. Нажмите на пресет (десктоп, телефон, квадрат, соцсеть) или введите произвольную ширину и высоту в пикселях. Превью обновляется мгновенно.
- 4Скачайте PNG. Нажмите «Скачать PNG», чтобы сохранить градиент как изображение в полном разрешении, или скопируйте CSS, чтобы использовать тот же градиент в коде.
Кому пригодится
- Дизайнеры и создатели контента, которым нужен чистый фон-градиент для слайда, превью, баннера или истории без открытия Photoshop.
- Пользователи телефонов и компьютеров, создающие обои с градиентом под точное разрешение своего экрана.
- Разработчики, которым нужна лёгкая PNG-заглушка или hero-изображение с градиентом, а также соответствующий CSS-код для его воспроизведения.
- SMM-менеджеры, экспортирующие фирменные градиентные фоны нужного размера для постов, историй и обложек.
Вопросы и ответы
Этот генератор градиента бесплатный?
Да - на 100% бесплатный, без регистрации, водяных знаков и ограничений. Создавайте и скачивайте сколько угодно градиентных изображений.
Что-нибудь загружается на сервер?
Нет. Градиент рисуется и сохраняется полностью в вашем браузере с помощью canvas. Никакие цвета, изображения или данные об использовании никуда не отправляются.
В каком формате экспортируется изображение?
Экспорт идёт в формате PNG, который сохраняет градиент идеально гладким и без потерь качества, без артефактов сжатия. Файл сохраняется в полном пиксельном размере, который вы задали, и готов к использованию как обои, фон или для загрузки.
Какой размер выбрать для обоев с градиентом?
Ориентируйтесь на экран. Частые варианты: 1920x1080 для большинства десктопов, 1080x1920 для телефона в портретной ориентации и 1080x1080 для квадратного поста в соцсети. Также можно задать любую произвольную ширину и высоту до 8000 пикселей.
В чём разница между линейным и радиальным градиентом?
Линейный градиент смешивает цвета вдоль прямой линии под выбранным углом, поэтому цвет меняется по изображению. Радиальный градиент начинается от центральной точки и расходится по кругу, поэтому цвет меняется от центра к краям.
Можно ли получить и CSS, и изображение?
Да. Вместе со скачиваемым PNG инструмент показывает соответствующий CSS-код background-image. Скопируйте его, чтобы воспроизвести точно такой же градиент на сайте или в приложении вместо использования файла изображения.
Как работают точки перехода?
Каждая точка сопоставляет цвет с позицией от 0% до 100% вдоль градиента. Переход между соседними точками идёт плавно. Если разместить две точки в одной позиции, вместо плавного перехода получится резкая граница - удобно для полос или блочных цветовых фонов.