Генератор мэш-градиента

Мэш-градиенты как чистый SVG

Мэш-градиенты — красочные многоточечные фоны, напоминающие мазки краски — стали культовыми благодаря маркетинговым страницам Stripe и Linear. Этот генератор выдаёт такой же эффект в виде крошечного самодостаточного SVG — без изображений, WebGL и canvas.

Техника

Так как CSS и SVG пока не поддерживают нативный мэш-градиент полностью, инструмент накладывает несколько мягких радиальных градиентов. Каждый плавно переходит от выбранного цвета в точке (x, y) к полной прозрачности. Наложенные на сплошной фон, эти радиальные «лужи» смешиваются друг с другом, имитируя мэш, нарисованный вручную.

Подход предельно переносим: итоговый SVG использует лишь стандартные <radialGradient> и <rect> — без фильтров и скриптов — и работает везде, где поддерживается SVG.

Элементы управления

• Точки — от 2 до 6 цветных пятен. У каждой свой цвет и ползунки X/Y.
• Мягкость — радиус каждого радиального градиента. Низкая мягкость даёт компактные, насыщенные цвета; высокая — мягкие пастели.
• Фон — сплошной цвет за пятнами.
• Перегенерировать — случайная раскладка точек при сохранении палитры.

Где использовать

• Hero-фоны для современных SaaS
• Сплэш-экраны приложений
• Обложки подкастов и музыки
• Мокапы продуктов и маркетинговые баннеры
• Фоны блогов и документационных сайтов

SVG растягивается до любого контейнера благодаря preserveAspectRatio="none", поэтому один файл работает как фоновая картинка в любом брейкпойнте. Комбинируйте с генераторами зернистого градиента или текстуры шума для модного, тактильного вида.