Генератор градієнту із зображення
Витягніть красивий градієнт із будь-якої фотографії — перетягніть зображення, оберіть настрій, і домінуючі кольори стануть перетягуваними зупинками градієнту. Миттєво скопіюйте готовий CSS.
Перетягніть зображення сюди
або натисніть для вибору — також можна вставити з буфера обміну
Все працює у вашому браузері — ваше зображення ніколи не завантажується, без реєстрації, повністю безкоштовно.
background: —;
Про Генератор градієнту із зображення
Gradient Generator from Image перетворює будь-яке фото на готовий до використання CSS-градієнт. Перетягніть, виберіть або вставте зображення, і інструмент зчитує його на полотні, витягує домінуючі кольори та розкладає їх як точки градієнта, які можна перетягувати, перефарбовувати й переупорядковувати, доки суміш не відповідатиме настрою оригіналу.
Селектор настрою — Colorful, Bright, Muted, Deep або Dark — змінює, які з витягнутих кольорів стають точками, тож одне фото може дати кілька дуже різних градієнтів. Ви керуєте типом градієнта (лінійний, радіальний чи конічний), кутом і самими точками: клацніть смугу, щоб додати точку, перетягніть для переміщення, розверніть чи оберніть одним кліком.
Увесь процес виконується у вашому браузері; ваше зображення ніколи не завантажується на сервер. Коли попередній перегляд виглядає добре, скопіюйте повне правило CSS, лише значення background або самі витягнуті кольори — ідеально для hero-секцій, фонів сторінок і брендових візуалів, отриманих з фотографії.
Як використовувати Генератор градієнту із зображення
- Перетягніть зображення, натисніть для вибору файлу або вставте його з буфера обміну.
- Оберіть настрій — Colorful, Bright, Muted, Deep або Dark, — щоб вибрати, які витягнуті кольори стануть точками.
- Виберіть тип градієнта (лінійний, радіальний чи конічний) і налаштуйте кут.
- Перетягуйте точки кольору для точного налаштування суміші; додавайте, видаляйте, розвертайте чи перемішуйте точки за потреби.
- Натисніть «Copy CSS», щоб отримати готовий до вставки код градієнта.