Генератор размытых SVG-форм

Мягкие, мечтательные фоны без тяжёлых изображений

Размытые цветные фоны — часто называемые «аврора» или «абстрактные градиенты» — стали стандартным стилем для лендингов, дашбордов и сплэш-экранов приложений. Вместо тяжёлого PNG этот генератор выдаёт несколько SVG-эллипсов, размытых фильтром feGaussianBlur: результат остаётся чётким при любом разрешении, весит считанные килобайты и полностью использует GPU браузера.

Как это работает

Инструмент равномерно разбрасывает несколько эллипсов по viewBox 800×600 с помощью функции случайности с seed. Каждый эллипс получает цвет из вашей палитры. Вся группа оборачивается в SVG-фильтр с сильным гауссовым размытием — достаточно сильным, чтобы формы перетекали друг в друга, создавая тот самый мягкий «облачный» вид.

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

• Формы — сколько размытых эллипсов рисовать. Больше форм — насыщеннее фон.
• Размытие — сила гауссового размытия. Слабое сохраняет контуры, сильное сливает всё в градиент.
• Разброс размеров — насколько формы могут отличаться по размеру.
• Палитра — до пяти пользовательских цветов. Добавляйте или удаляйте под ваш бренд.
• Фон — сплошной цвет за размытыми формами.
• Seed + Перегенерировать — новый seed — новое расположение; один seed всегда даёт один и тот же результат.

Типичные применения

• Фоны hero-секций
• Современные сплэш-экраны приложений
• OG- и социальные шэр-изображения
• Фоны тарифных секций
• Фоны карточек на маркетинговых страницах

Благодаря preserveAspectRatio="none" SVG растягивается до любой ширины при width: 100%. Вставляйте результат прямо в HTML, React или дизайн-инструменты — или правьте цвета позже в текстовом редакторе.