Cómo usar: SVG Wave Generator
- Click Shuffle waves for a new random wave, then + Add wave or remove one with ×, and fine-tune crests and height.
- Choose Smooth, Peaks or Steps, and whether the wave sits at the bottom or top of a section.
- Give each wave its own color and opacity (or set one color for all), reshape a single wave with ↻, and pick the background behind it.
- Copy the SVG, or the CSS background version, or download the file.
Adding a wave divider to a section
The SVG uses a wide viewBox (1440 × 320) with preserveAspectRatio="none", so it stretches to the full width of any section. Place it at the edge of the section whose color it matches:
<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; }Or use the CSS background output — the SVG is encoded into a url("data:image/svg+xml,…") so you need no extra file. Each layer is a single <path>; layered waves get progressively lighter shades of your color for depth.
Related: SVG Blob Generator, CSS Gradient Generator, SVG Optimizer.
También se busca como: wave generator, css wave, section divider generator, wavy background svg, wave svg, shape divider, layered waves generator.
Herramientas que combinan con: SVG Wave Generator
- CSS Mask Generator — Make images and sections fade out instead of ending hard: fade one edge, top and bottom, all four edges, a radial vignette or a spotlight, cut the element into stripes — or mask it with a shape (star, heart, hexagon, arrow…) with soft, feathered edges that clip-path can’t do.
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Preguntas frecuentes
How do I add a wave divider between sections?
Generate a wave, copy the SVG and place it at the bottom (or top) of the section, absolutely positioned with width: 100%. Set the wave color to the next section’s background color.
Why does the wave stretch to any width?
The SVG uses preserveAspectRatio="none", so it scales horizontally to fill the container while you control its height in CSS.
Can I use it in Webflow or WordPress?
Yes — paste the SVG into an Embed / HTML block, or use the CSS background version in your stylesheet.
Are the waves free to use?
Yes. They are generated on your device; use them anywhere without attribution.
¿Puedo instalar SVG Wave Generator como aplicación web y utilizarla sin conexión?
Sí. SVG Wave Generator es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.