Більшість генераторів градієнта дають лише рядок 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% вздовж градієнта. Перехід між сусідніми точками відбувається плавно. Якщо розмістити дві точки в одній позиції, замість плавного переходу з'явиться різка межа - зручно для смуг чи блокових кольорових фонів.