Генератор mesh-градиента
Создайте цветной многоточечный mesh-градиент прямо на canvas — загружать изображение не нужно. Настройте количество точек и их цвета, затем экспортируйте результат в PNG или скопируйте эквивалентный CSS.
Как это работает
Каждая цветная точка служит источником влияния: для каждого пикселя canvas итоговый цвет — это взвешенное среднее цветов всех точек, причём вес тем больше, чем ближе точка (взвешивание по обратному расстоянию). В результате получается плавный, органичный градиент между выбранными цветами.
Даст ли скопированный CSS точно такой же результат, как PNG?
Нет. Сгенерированный CSS использует наложение нативных радиальных градиентов CSS, которое выглядит похоже, но не совпадает пиксель в пиксель с интерполяцией по обратному расстоянию, вычисленной на canvas. Это лёгкое, но достаточно точное приближение, которое можно сразу использовать как фон сайта.
Почему результат меняется при каждом нажатии на «Случайные позиции»?
Позиции точек выбираются случайно в пределах canvas при каждой генерации. В сочетании с выбранными вами цветами это позволяет быстро перебирать множество вариантов mesh-градиента, не расставляя точки вручную.
Весь рендеринг выполняется локально в вашем браузере: данные не отправляются на сервер, даже если вы не загружаете ни одного изображения.