CSS-градиент по изображению
Загрузите фотографию или иллюстрацию: её доминирующие цвета будут извлечены и автоматически собраны в CSS-градиент linear-gradient, готовый к копированию. 100% локальная обработка в вашем браузере (WebAssembly) — изображение никогда не отправляется на сервер.
Как это работает
Перенести цветовую гамму фотографии на фон раздела, баннер или карточку товара, не дублируя само изображение, — именно это и делает данный инструмент. Он анализирует пиксели загруженного изображения, выделяет наиболее представленные оттенки, а затем последовательно собирает их в линейный градиент, угол которого можно изменить перед копированием готового CSS-свойства.
Сохраняет ли градиент тот же порядок цветов, что и изображение?
Цвета упорядочиваются от наиболее частых к наименее частым в исходном изображении, и градиент выстраивает их именно в этом порядке. Если результат вас визуально не устраивает, скопируйте код и вручную поменяйте порядок цветов в своей таблице стилей.
Сколько цветов выбрать для аккуратного результата?
Два-три цвета обычно дают читаемый и элегантный градиент, близкий к классическому фону раздела. При более чем четырёх цветах результат может больше напоминать радугу, чем тонкий градиент — оставьте это для намеренно ярких эффектов.
Конфиденциальность: извлечение цветов и создание CSS выполняются целиком в вашем браузере через WebAssembly, без загрузки изображения на сервер.