Дизайнери, студенти й усі, хто створює фон для екрана, можуть налаштувати градієнт за допомогою елементів керування, а потім експортувати його. Зображення створюється локально у вашому браузері, тож ви можете згенерувати файл, не завантажуючи вибрані кольори кудись іще.
Як користуватися генератором градієнтних фонів
- Виберіть тип заливки фону: суцільна, лінійна або радіальна. Задайте основний колір, а потім додайте або видаліть градієнтні маркери, щоб створити потрібний перехід.
- Для лінійного градієнта налаштуйте кут градієнта (у градусах). Скористайтеся випадковим початковим числом і пресетом градієнта (Море або Сутінки), а потім виберіть «Згенерувати за початковим числом», щоб створити варіант із заданим початковим числом. Маркери в однаковій позиції навмисно утворюють різкі межі.
- Виберіть пресет роздільної здатності, наприклад 1920x1080, 1080x1080 або 1080x1920. Виберіть «Власний розмір», щоб самостійно ввести ширину вихідного зображення (у пікселях) і висоту вихідного зображення (у пікселях).
- У розділі «Формат зображення» виберіть PNG, JPG або WEBP. Попередній перегляд має невеликий розмір; виберіть «Завантажити зображення», щоб створити й завантажити файл у повному розмірі.
- Виберіть «Копіювати CSS базового градієнта», якщо вам потрібен CSS для базового градієнта. Скористайтеся повноекранним режимом, щоб розгорнути сцену, «Приховати елементи керування», щоб прибрати їх з екрана, або «Скинути», щоб почати спочатку. Натисніть F для повноекранного режиму, R для скидання та Escape, щоб вийти з повноекранного режиму.
Коли це стане в пригоді
- Створення шпалер для комп’ютера: виберіть широкоформатну роздільну здатність, як-от 1920x1080 або 3840x2160, щоб відповідати поширеному формату екрана.
- Створення фону для телефона: виберіть портретний формат 1080x1920 для вертикальної композиції.
- Підготовка квадратного графічного фону: виберіть 1080x1080 для квадратного полотна.
- Пошук вдалих поєднань кольорів: налаштуйте основний колір і градієнтні маркери перед завантаженням, замість того щоб знову й знову редагувати експортовані файли.
- Створення фону з чіткою межею кольорів: розмістіть маркери в однаковій позиції, щоб навмисно утворити різку межу.
- Використання знайомого варіанта як початкового: виберіть пресет градієнта «Море» або «Сутінки» та згенеруйте варіант із початкового числа.
- Додавання градієнта до вебдизайну: скопіюйте CSS базового градієнта як основу для стилю фону.
Поради для створення кращих градієнтних фонів
Виберіть форму зображення перед тим, як ретельно налаштовувати кольори: градієнт, який має гармонійний вигляд у широкому попередньому перегляді, може інакше сприйматися у вертикальному або квадратному зображенні. Якщо вам потрібен певний розмір полотна, виберіть «Власний розмір» і введіть його ширину та висоту.
| Налаштування | На що впливає |
|---|---|
| Кут градієнта (у градусах) | Визначає напрямок лінійного градієнта. |
| Градієнтні маркери | Дають змогу керувати кольорами та переходами в градієнті; маркери в однаковій позиції створюють різку межу. |
| Формат зображення | Доступні PNG, JPG і WEBP. JPG і WEBP можуть змінювати значення пікселів. |
| Роздільна здатність | Визначає розміри завантаженого зображення. Підтримка 8K залежить від пристрою. |
Попередній перегляд — це лише невелике відображення зображення: повнорозмірне зображення створюється після вибору «Завантажити зображення». Якщо ви використовуєте CSS, пам’ятайте, що функція «Копіювати CSS базового градієнта» описує лише базовий градієнт, а не додаткові візерунки, текст чи фігури.
Обмеження, про які варто пам’ятати
Генератор градієнтних фонів створює зображення для завантаження, але не гарантує, що результат виглядатиме однаково на кожному дисплеї чи в кожному браузері. Відображення в Canvas і CSS може відрізнятися на межах, особливо навколо різких переходів. JPG і WEBP також можуть змінювати значення пікселів, тож вибирайте PNG, якщо важливо зберегти їх точними.
Максимальний розмір вихідного зображення — 33 177 600 пікселів, а можливість експортувати дуже великі файли залежить від пристрою; робота з 8K не гарантована на кожному пристрої. Якщо завантаження великого файлу повільне або завершується помилкою, виберіть меншу роздільну здатність або введіть менші власні розміри. Для роботи, де важлива точність кольорів, перевірте експортоване зображення у потрібній програмі та на цільовому дисплеї.
