Градиент из фото
Соберите мягкий меш-градиент из нескольких цветов или возьмите палитру из своего фото. Двигайте точки цветов прямо на холсте, добавьте искажение и зерно, скачайте картинку или скопируйте CSS.
Браузер не поддерживает WebGL - инструмент не запустится. Попробуйте другой браузер или включите аппаратное ускорение.
Наведите на холст - появятся точки цветов: перетаскивайте их, двойной клик добавляет цвет. Фото можно перетащить на холст или вставить из буфера.Перетаскивайте точки цветов пальцем, двойное касание добавляет цвет.
Цвета идут по порядку списка. Поменять порядок - кнопка «Обратный порядок».
CSS
Для линейного, радиального и конического - точный. Для меша и мозаики - похожий фон из радиальных пятен, без искажения и зерна.
Свой градиент за минуту
- 1Выберите цветаиз палитры, случайно или из своего фото
- 2Подвигайте точкии подберите искажение и зерно
- 3СкачайтеPNG, JPG, WebP, SVG или скопируйте CSS
Что это за градиенты
Меш-градиент собирается из нескольких точек цвета: каждая окрашивает область вокруг себя, а между ними цвета плавно перетекают. Такие фоны стоят за обложками, баннерами, сторис и экранами приложений. Ползунок «Мягкость» решает, насколько широко смешиваются цвета, а «Мозаика» режет холст на зоны по ближайшей точке. Линейный, радиальный и конический - классические градиенты, которые точно переносятся в CSS.
Палитра из фото
Загрузите фото - инструмент найдёт в нём до семи главных цветов и расставит точки там, где эти цвета живут на снимке. Так градиент повторяет настроение фотографии: закат, море, интерьер, упаковка товара. Фото остаётся в браузере и никуда не отправляется.
Искажение и зерно
Искажение сдвигает цвета по узору: волны, плавный шум, ячейки или завихрение вокруг центра. «Сила» отвечает за то, насколько сильно, «Масштаб узора» - за его крупность, кнопка с кубиком даёт другой случайный узор. Зерно добавляет лёгкую зернистость, как на плёнке: с ним градиент не выглядит пластиковым и не даёт полос на экранах. В разделе «Настроить все цвета» можно разом сдвинуть оттенок, насыщенность и яркость всей палитры.
Попробуйте также
Тоже бесплатно и без регистрации
Частые вопросы
Не нашли ответ - напишите нам, подскажем.
В том, что указан в полях W и H, до 4096 пикселей по большей стороне (ограничение видеокарты в браузере). Есть готовые размеры для поста, сторис, шапки X, превью ссылки и обоев. На экране показывается уменьшенная копия с теми же пропорциями.
PNG - без потерь, лучше для дизайна. JPG и WebP - легче по весу, подходят для соцсетей и сайтов. SVG для линейного и радиального градиента без искажения и зерна - настоящий векторный файл, который можно редактировать в Figma; для меш-градиента и искажений внутри SVG лежит картинка, потому что векторного формата для таких градиентов нет.
Для линейного, радиального и конического - да. Меш-градиент в CSS собирается из нескольких радиальных пятен и выглядит похоже, но без искажения и зерна: браузеры не умеют рисовать их обычным CSS. Если нужен точь-в-точь такой фон, используйте PNG.
Фото уменьшается, и все его пиксели группируются по близости цвета (метод k-средних). Центры групп становятся цветами палитры, а точка каждого цвета ставится туда, где этот цвет чаще всего встречается на снимке. Слишком редкие цвета отбрасываются.
Да. Нажмите на квадратик цвета, чтобы открыть палитру, или впишите HEX-код в поле рядом. Цветов может быть от 2 до 12. Крестик удаляет цвет, плюс добавляет новый, а двойной клик по холсту ставит новую точку прямо в этом месте.
Нажмите «Ссылка на градиент» - ссылка скопируется, и по ней откроется тот же градиент со всеми цветами, точками и настройками. Кроме того, последний градиент сохраняется в вашем браузере и открывается при следующем визите. Ошиблись - отмените шаг кнопкой со стрелкой или сочетанием Ctrl+Z.
На экране рисуется уменьшенная копия, а файл - в полном размере, поэтому зерно и мелкие детали искажения в файле мельче. Сами цвета и расположение точек совпадают.
Да, без ограничений: это ваша картинка. Фото, из которого взята палитра, никуда не уходит, а палитра цветов не является объектом авторского права.