Как пользоваться: Генератор SVG-волн
- Нажмите Перемешать волны, чтобы получить новую случайную волну, затем используйте + Добавить волну или удалите лишнюю кнопкой ×, и настройте гребни и высоту.
- Выберите Плавный, Пики или Ступени, а также то, будет ли волна внизу или вверху секции.
- Задайте каждой волне свой цвет и прозрачность (или один цвет для всех), измените форму отдельной волны кнопкой ↻ и выберите фон за ней.
- Скопируйте SVG или версию CSS-фона
Добавление волнового разделителя в секцию
SVG использует широкий viewBox (1440 × 320) с preserveAspectRatio="none", поэтому он растягивается на всю ширину любой секции. Разместите его у края секции, цвет которой он должен соответствовать:
<section class="hero">
…
<svg class="wave" viewBox="0 0 1440 320" preserveAspectRatio="none">…</svg>
</section>
.hero { position: relative; }
.wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; }Или используйте вариант CSS-фона: SVG закодирован в url("data:image/svg+xml,…"), поэтому дополнительный файл не нужен. Каждый слой — это один <path>; для глубины слоистые волны получают всё более светлые оттенки вашего цвета.
Похожие инструменты: Генератор SVG-блобов, Генератор CSS-градиентов, Оптимизатор SVG.
Также ищут как: генератор волн, css волны, генератор разделителей секций, слоистые волны.
Инструменты, которые хорошо сочетаются с Генератор SVG-волн
- Генератор CSS-масок — Сделайте изображения и блоки плавно исчезающими вместо резкого обрыва: затухание одного края, сверху и снизу, всех четырёх краёв, радиальная виньетка или прожектор, разрезание элемента на полосы — либо маска в форме фигуры (звезда, сердце, шестиугольник, стрелка…) с мягкими, растушёванными краями, которых не даёт clip-path.
- Генератор CSS Clip-path — Обрежьте изображения и элементы в любую форму: выберите одну из 15 стартовых фигур — треугольник, шестиугольник, звезда, стрелка, шеврон, речевой пузырь, круг, эллипс, скругленный inset… — и перетащите точки по примеру или своему изображению.
- Генератор border-radius — Скруглите углы любого блока: перемещайте один ползунок для всех углов или задайте каждый угол отдельно, переключитесь на эллиптические углы для форм капли и листа и скопируйте самый короткий корректный CSS-код border-radius.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.
Часто задаваемые вопросы
Как добавить волновой разделитель между секциями?
Сгенерируйте волну, скопируйте SVG и разместите его внизу (или вверху) секции с абсолютным позиционированием и width: 100%. Задайте цвету волны цвет фона следующей секции.
Почему волна растягивается на любую ширину?
SVG использует preserveAspectRatio="none", поэтому он масштабируется по горизонтали, заполняя контейнер, а высоту вы задаёте в CSS.
Можно ли использовать его в Webflow или WordPress?
Да: вставьте SVG в блок Embed / HTML или используйте вариант с CSS-фоном в своей таблице стилей.
Волны можно использовать бесплатно?
Да. Они генерируются на вашем устройстве, и их можно использовать где угодно без указания авторства.
Можно ли установить Генератор SVG-волн как веб-приложение и пользоваться им офлайн?
Да. Генератор SVG-волн — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.