Перейти к содержимому

Градиентный фон для изображения

Добавьте плавный линейный или радиальный градиент позади изображения с прозрачным фоном, например вырезанного изображения товара, логотипа или снимка экрана приложения. Выберите два цвета, угол линейного градиента и отступ вокруг изображения — инструмент создаст градиент точно в размере результата и поместит поверх него ваше изображение. Через прозрачные области будет виден градиент. Результат можно скачать в форматах PNG, JPEG или WebP для магазинов приложений и социальных сетей.

Выберите файлы или перетащите их в поле загрузки. Максимальный размер файла: 5 MB.

Сбросить

Часто задаваемые вопросы

Какие изображения подходят лучше всего?

На изображениях с прозрачными областями, например вырезанных изображениях товаров, логотипах или людях в форматах PNG или WebP, градиент виден позади объекта. Изображение без прозрачности закроет градиент — он останется виден только в отступах вокруг изображения.

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

Линейный градиент переходит от начального цвета к конечному по прямой линии под выбранным углом. Радиальный градиент начинается с начального цвета в центре и переходит к конечному по углам.

Как работает угол?

Угол задается по соглашению CSS: при 0 градусов градиент идет снизу вверх, при 90 — слева направо, при 180 — сверху вниз, а при значении по умолчанию 135 — из верхнего левого угла в нижний правый. Для радиальных градиентов угол не учитывается.

Для чего нужен отступ?

Отступ добавляет от 0 до 1000 пикселей градиента с каждой стороны изображения, поэтому результат будет больше исходного изображения на удвоенный размер отступа. Он оставляет вокруг вырезанного объекта свободное пространство, как на студийном фоне.

Какие цвета можно использовать?

Введите цвета в формате hex, например #6366f1 и #ec4899, из трех, четырех, шести или восьми цифр. Последние две цифры восьмизначного цвета задают его непрозрачность. Слово transparent полностью убирает градиент.

Размер результата будет таким же, как у моего изображения?

Да, если отступ равен 0. В противном случае размер увеличится на величину отступа. Если итоговый размер превысит 4000 пикселей по стороне, изображение будет уменьшено так, чтобы результат не превышал 4000 пикселей.

Какие форматы поддерживаются?

Можно загрузить изображения в форматах JPEG, PNG, GIF, WebP, TIFF и AVIF размером до 5 MB. По умолчанию результат будет в формате PNG, также можно выбрать JPEG или WebP с качеством 90.

Градиент получается плавным?

Да. Градиент создается как векторное изображение точно в размере результата, поэтому на нем нет видимых полос или артефактов масштабирования. В результате в формате PNG качество сохраняется без потерь.

Можно ли использовать инструмент для снимков экрана магазина приложений?

Да. Загрузите снимок экрана с закругленными прозрачными углами, добавьте от 80 до 200 пикселей отступа и выберите цвета бренда, чтобы получить эффектное рекламное изображение.

Удаляет ли инструмент существующий фон?

Нет. Он только заполняет уже прозрачные области и добавляет отступы. Если фон на фотографии еще есть, сначала удалите его с помощью инструмента для удаления фона.

О проекте OneClick Pro

OneClick Pro — это бесплатная коллекция из более чем 150 веб-инструментов для повседневных задач: преобразования изображений и единиц измерения, форматирования и проверки кода, проверки доменов и SEO, а также работы с текстом, датами и числами. Все инструменты доступны без регистрации и подписки, а введенные вами данные используются только для расчета результата и никогда не сохраняются. Используйте коллекцию как быстрый набор инструментов для разовых задач или добавьте в закладки те, которыми пользуетесь каждый день.