Как собрать свой градиент
Инструмент работает двумя способами, которые выбираются кнопками сверху. Он открывается на режиме «Применить к моим изображениям», зона загрузки уже готова: перетащите одно или несколько фото — принимаются JPG, PNG, WEBP, GIF и BMP — и градиент нарисуется поверх каждого. Если загружено больше одного фото, над предпросмотром появятся вкладки с именами файлов для переключения. Под второй кнопкой, «Создать фон», ничего загружать не нужно: вы выбираете цвета, тип градиента и размер, и изображение создаётся сразу.
У градиента четыре типа. Линейный ведёт переход по прямой, а угол задаётся ползунком по той же конвенции, что в CSS, где 0 градусов указывает вверх. Радиальный начинается в центре и расходится кругом. Конический вращает цвета вокруг центральной точки и даёт тот веерный эффект, который встречается на современных фонах. «Без градиента» отключает его совсем: поверх ваших фото изображение проходит без изменений и получает только финишные эффекты, а в режиме создания фона первый цвет становится заливкой. Цвета расположены сразу ниже: в каждой строке свой выбор цвета, регулятор позиции в процентах и кнопка удаления. Можно использовать от двух до шести цветовых точек, а кнопка добавления вставляет новый цвет между существующими. Если хочется начать с готового, сетка палитр предлагает двенадцать проверенных сочетаний, а кнопка случайного градиента подбирает новые цвета и угол при каждом щелчке.
Шесть текстур накладываются поверх градиента, и их интенсивность регулируется. Зерно плёнки добавляет монохромное зерно: меняет только яркость пикселей и не трогает цвет — это основное средство против полос, которые появляются на ровных градиентах. Цветовой шум делает ровно обратное: меняет только цвет и сохраняет яркость, давая вид фото со высоким ISO. Линии рисуют диагональные штрихи, а Точки создают ровную сетку — и то и другое полезно для фонов с графическим узором. Бумага соединяет мягкое зерно с легким затемнением краёв, как печатный лист. Отдельно от текстур есть два финишных эффекта. Виньетка постепенно затемняет все четыре края и ведёт взгляд к центру. Боковой градиент делает то же самое с одной стороны — сверху, снизу, слева или справа — и имеет четыре типа: затемнить под светлый текст, осветлить под тёмный, взять первый цвет градиента или растворить край в прозрачность. Регуляторы охвата и интенсивности задают, насколько далеко идёт полоса и как тяжело она ложится. Оба применяются последними, после всего остального, поэтому ведут себя одинаково в обоих режимах, и режим наложения их не меняет.
В режиме создания фона выберите один из шести готовых размеров — Full HD, квадрат, история, превью, Open Graph или обои — либо впишите ширину и высоту в свои поля, до 6000 px на сторону. Блок CSS-кода показывает объявление для текущего градиента, а кнопка копирует всё в буфер обмена, готовым для вставки в вашу таблицу стилей. Наконец, выберите PNG, JPG или WEBP и скачайте изображение; в режиме наложения с несколькими фото кнопка «Скачать все» отдаст набор одним файлом .zip.
Частые вопросы
Сохраняются ли где-то изображения, которые я загружаю?
Нет. Градиент рисуется в вашем браузере, а изображения в режиме наложения никогда не уходят в интернет. Ничего не сохраняется на сервере.
Нужно ли загружать изображение, чтобы пользоваться инструментом?
Нет. В режиме создания фона вы выбираете только цвета и размер, и файл создаётся сразу. Загрузка изображений нужна лишь для режима наложения, где градиент рисуется поверх ваших фото.
Чем отличается скачать изображение от скопировать CSS?
CSS создаёт градиент прямо в браузере посетителя, без загрузки файла: это самый лёгкий вариант, с нулевым расходом трафика, и он идеален для фонов секций и кнопок. PNG или JPG нужен там, где CSS не работает: обложка истории, превью видео, слайд презентации или обои рабочего стола. Важно помнить: текстура существует только в экспортированном изображении, потому что у CSS-градиентов зерна нет.
Какой размер брать для каждой соцсети?
Пресеты покрывают самые частые случаи: 1080×1080 для квадратного поста в Instagram или Facebook, 1080×1920 для историй и Reels, 1280×720 для превью YouTube, 1200×630 для картинки Open Graph, которая появляется в WhatsApp и LinkedIn, 1920×1080 для слайдов и 2560×1440 для обоев. Для любого другого размера впишите ширину и высоту в свои поля, до 6000 px на сторону.
Зачем нужно зерно на градиенте?
Ровные градиенты на 8-битных экранах часто показывают заметные цветные полосы — дефект, известный как бэндинг, и он тем сильнее, чем ближе два цвета. Легкий слой зерна между 20% и 40% разбивает эти полосы, и переход читается как непрерывный. Вдобавок зерно даёт ту печатную фактуру, что стала обычной в фирменном стиле и на обложках проектов.
Как положить градиент на фото, не потеряв то, что на нём видно?
Выберите режим наложения и начните с непрозрачности между 40% и 60%. Режимы наложения сильно меняют результат: умножение затемняет и подходит, чтобы положить сверху светлый текст, экран осветляет, а цветность тонирует фото, сохраняя его исходный контраст — этот режим бережёт больше всего деталей. Для обложки с заголовком тёмный градиент в умножении по низу оставляет текст читаемым, не скрывая изображение.
Можно использовать только текстуру или виньетку, без градиента?
Да. Выберите «Без градиента» в первом параметре, типе градиента. Поверх ваших фото изображение проходит без изменений и получает только то, что вы включите дальше — зерно, виньетку или боковой градиент. Так инструмент помогает придать фото плёночную фактуру, не трогая его цвета. В режиме создания фона этот вариант берёт первый цвет как заливку, что удобно для однотонного фона с зерном.
Чем зерно плёнки отличается от цветового шума?
Оба разбрасывают случайную вариацию по пикселям, но по противоположным осям. Зерно плёнки меняет только яркость и оставляет цвет нетронутым, воспроизводя фотографическое зерно — именно оно разбивает заметные полосы ровных градиентов. Цветовой шум делает обратное: меняет только цвет и сохраняет яркость, давая цветные крапинки, похожие на съёмку при высоком ISO. На практике: зерно как финиш и против бэндинга, цветовой шум — когда нужен аналоговый вид или вид старого экрана.
Зачем нужна виньетка и какая интенсивность уместна?
Виньетка постепенно затемняет края и подталкивает внимание к центру изображения: классический приём в фотографии и на обложках видео, где лицо или товар конкурирует с фоном. Между 30% и 50% эффект тонкий и не бросается в глаза, что обычно и нужно; выше 70% он становится очевидным и приобретает драматический тон. Поскольку виньетка рисуется последней, после градиента, выбранный режим наложения на неё не влияет.
Как затемнить только низ фото, чтобы поставить заголовок?
Включите боковой градиент и выберите край с той стороны, где будет текст, оставив тип на затемнении. По умолчанию стоит слева — это покрывает самый частый случай баннера с заголовком слева и картинкой справа; для обложки видео с заголовком внизу переключитесь на нижний край. Охват между 35% и 50% при интенсивности около 75% даёт белому тексту достаточно контраста, не скрывая сюжет.
Можно применить один градиент к нескольким фото?
Да. В режиме наложения загрузите столько изображений, сколько нужно: одни и те же цвета, текстура, непрозрачность и наложение применяются ко всем, а загрузка в .zip отдаёт весь набор. Это самый быстрый способ выровнять обложки блога или превью канала.