Генератор mesh-градиентов

Создавайте mesh-градиенты с перетаскиваемыми цветовыми точками

Mesh-градиенты смешивают множество цветов по поверхности мягкими, органичными переходами. Они стали неотъемлемой частью фонов главных разделов, заставок приложений и музыкальных обложек, потому что выглядят богаче простого двухцветного линейного градиента. Этот генератор mesh-градиентов позволяет разместить от трёх до шести цветных точек прямо на холсте, перетащить их на нужные места и мгновенно видеть обновлённое смешивание.

Как это работает на чистом CSS

Браузеры не поддерживают настоящие mesh-градиенты, но их можно имитировать, наложив несколько фонов radial-gradient(). Каждый слой центрирован на одной из ваших точек и плавно переходит от цвета точки к полностью прозрачной версии того же цвета, а все слои лежат поверх базового background-color. Перекрывающиеся переходы плавно смешивают цвета, и так возникает эффект mesh. Сгенерированный CSS — это одна декларация без изображений, поэтому она загружается мгновенно и масштабируется до элемента любого размера.

Переход к rgba() с нулевой альфой вместо ключевого слова transparent устраняет серые каймы, которые могут появляться в некоторых движках рендеринга, а также позволяет точно воспроизвести тот же градиент на HTML canvas для экспорта в PNG.

Размытие, шум и палитры

Ползунок размытия добавляет CSS filter: blur() для ещё более мягкого вида, а ползунок шума накладывает SVG-текстуру фрактального шума, которая добавляет лёгкую зернистость и уменьшает цветовые полосы на больших поверхностях. Кнопка «Случайная палитра» подбирает гармоничный набор оттенков со сбалансированной насыщенностью и светлотой, а «Случайное расположение» ещё и переставляет точки. Когда результат вас устраивает, скопируйте CSS в свою таблицу стилей или скачайте PNG размером 1600 на 900 пикселей. Всё генерируется локально в вашем браузере, и ничего не загружается.