Онлайн-генератор зображень з лінійним градієнтом

Можливості та приклади використання

Цей інструмент створює зображення з лінійним градієнтом, яке можна використовувати як фон для веб-сторінок, соціальних мереж, презентацій чи інших проєктів. Усе відбувається локально у вашому браузері, без завантаження файлів на сервер.

Приклад роботи

Припустимо, вам потрібен фон для банера розміром 1200×630 пікселів. Ви обираєте кольори #3B82F6 (синій) та #EC4899 (рожевий), кут 135 градусів, масштаб 100%. Інструмент створить градієнт, який починається у верхньому лівому куті (0,0) і йде до точки приблизно (-848.53, 445.48) на полотні. Це дає діагональний перехід від синього до рожевого.

Налаштування напрямку та масштабу

Кут вимірюється в градусах за годинниковою стрілкою від осі X (напрямок праворуч). Пам'ятайте, що вісь Y у координатах полотна спрямована вниз. Масштаб впливає на довжину вектора градієнта: при масштабі 200% перехід завершується вдвічі швидше, а решта області зафарбовується кольором кінцевої точки (без повторення).

Прозорість

Якщо увімкнути опцію прозорості, ви можете задати відсоток прозорості для кожного кольору окремо. Наприклад, 25% прозорості означає альфа-канал 0.75, а 100% — повністю прозорий (альфа 0). Інструмент створює рівно дві колірні зупинки (на позиціях 0 і 1), без додаткових опцій на кшталт повторення чи згладжування.

Обмеження

Максимальний розмір полотна — 10000 пікселів по кожній стороні, але загальна кількість пікселів не може перевищувати 24 мільйони. Якщо ви вкажете більші розміри, інструмент пропорційно зменшить їх до допустимого бюджету. Також враховуйте, що для тексту на зображенні потрібен достатній контраст, а співвідношення сторін має відповідати вашому призначенню.

Контрольний список перед генерацією

• Оберіть два кольори, які добре поєднуються.
• Переконайтеся, що розміри полотна відповідають потребам (наприклад, 1200×630 для соцмереж).
• Встановіть кут напрямку: 0° — горизонтально, 90° — вертикально вниз, 135° — діагонально вниз-вліво.
• За потреби змініть масштаб для більш різкого або плавного переходу.
• Якщо потрібна прозорість, увімкніть опцію та задайте відсотки.
• Після генерації перевірте результат і завантажте файл.

Поширені запитання

Чи можу я використовувати більше двох кольорів?

Ні, інструмент підтримує лише два кольори для кінцевих точок градієнта. Він створює рівно дві колірні зупинки на позиціях 0 і 1, без додаткових зупинок чи можливості додати третій колір.

Що означає масштаб 200%?

Масштаб впливає на довжину вектора градієнта. При 200% вектор стає вдвічі коротшим, тому перехід від першого до другого кольору завершується на половині полотна, а решта області зафарбовується кольором кінцевої точки. Градієнт не повторюється.

Чи можу я отримати зображення з прозорим фоном?

Так, увімкніть опцію прозорості та встановіть відсоток прозорості для кожного кольору. Наприклад, якщо ви хочете, щоб перший колір був повністю прозорим, встановіть 100% — альфа-канал буде 0. Зверніть увагу, що прозорість застосовується до всього градієнта, а не лише до фону.