Пиксель

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

Настройте линейный или радиальный градиент, скопируйте CSS или скачайте PNG 1920×1080 для обложки.

Настройки

Соберите линейный или радиальный градиент, скопируйте CSS или скачайте PNG 1920×1080.

Тип
Цвета

PNG рисуется в canvas теми же цветами и позициями, что и предпросмотр.

Предпросмотр

Градиент на весь блок — так он ляжет в фон или обложку.

CSS-код

Скопируйте и вставьте в стили. Работает без картинки и лишних файлов.

Готовый фон для обложки, сторис или презентации.

Всё считается в браузере, без отправки данных.

Градиент — быстрый способ сделать фон выразительнее без картинок и лишних запросов. Но подбирать углы и точки вручную в коде неудобно: приходится сохранять, обновлять страницу и снова править проценты. Визуальный конструктор показывает результат сразу и отдаёт готовый CSS.

Выберите линейный или радиальный тип, задайте угол, добавьте до четырёх цветов и расставьте позиции. Предпросмотр обновляется на каждое движение, а строка CSS копируется одной кнопкой. Если нужен не фон, а картинка для соцсетей, скачайте PNG 1920×1080 — он рисуется в canvas теми же цветами.

Всё считается в браузере: ни цвета, ни настройки не отправляются на сервер. Инструментом можно пользоваться на телефоне и без регистрации.

Линейный и радиальный Угол, центр и до четырёх цветовых точек.
Живой предпросмотр Изменения видны сразу, без перезагрузки.
Готовый CSS Одна строка для вставки в стили.
PNG 1920×1080 Фон для обложки, сторис или презентации.

Как это работает

  1. Выберите линейный или радиальный градиент и задайте угол.
  2. Настройте цвета и позиции точек — предпросмотр обновляется сразу.
  3. Скопируйте CSS или скачайте PNG 1920×1080 для обложки.

Где пригодится генератор

  • Фон лендинга, карточки или кнопки
  • Обложка видео, поста и сторис
  • Градиентная подложка под текст и цитату
  • Быстрый макет для презентации или баннера
Генератор палитр Гармонии, палитра из фотографии и проверка контраста текста по WCAG. Пипетка: цвет по фото Точный HEX, RGB и HSL в любой точке снимка. Работает на телефоне. Проверка контраста WCAG AA и AAA для текста на фоне, подбор безопасной пары цветов. Генератор QR-кодов Ссылка, Wi-Fi, визитка, Telegram или меню — в одном коде. PNG, SVG и PDF для печати.

Частые вопросы

Как вставить градиент в сайт?

Скопируйте строку из блока «CSS-код» и вставьте в нужное правило: background: linear-gradient(...). Это обычный CSS-градиент без картинки, поэтому он масштабируется под любой размер блока и не добавляет запросов. Для тёмной и светлой темы можно задать разные значения через переменные.

Чем линейный градиент отличается от радиального?

Линейный меняет цвет вдоль прямой под заданным углом: подходит для фонов, кнопок и обложек. Радиальный расходится от центра кругами или эллипсами: им делают подсветку, виньетки и мягкие пятна. В радиальном режиме угол не нужен, а центр по умолчанию находится посередине.

Что означает угол 0° и 90°?

Угол отсчитывается по часовой стрелке от направления «вверх». 0° — первый цвет снизу, последний сверху; 90° — слева направо; 180° — сверху вниз. Непривычно, но так работает CSS: linear-gradient(0deg, ...) идёт снизу вверх.

Сколько цветов можно добавить?

До четырёх точек. Двух хватает для большинства фонов, третья добавляет промежуточный оттенок, четвёртая — акцент или резкий переход. Позиции задаются в процентах: 0% — начало, 100% — конец. Если поставить две точки рядом, получится чёткая граница вместо плавного перехода.

Что скачивается в PNG?

Готовая картинка 1920×1080 px: те же цвета, позиции и угол, что в предпросмотре. Она подходит для обложки видео, сторис, презентации или фона в соцсетях. PNG рисуется в canvas на устройстве, поэтому не требует сервера и не сжимается с потерями.

Почему PNG выглядит чуть иначе, чем CSS?

CSS-градиент интерполируется браузером в рабочем цветовом пространстве, а canvas рисует в sRGB. На плавных переходах разница минимальна, но на границах с прозрачностью и в очень насыщенных цветах может быть заметна. Для обложек и фонов это не критично, для точной цветопробы лучше ориентироваться на CSS.