Como 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.
Também pesquisado como: wave generator, css wave, section divider generator, wavy background svg, wave svg, shape divider, layered waves generator.
Ferramentas que combinam com: 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.
Perguntas frequentes
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.
Posso instalar o SVG Wave Generator como um aplicativo da web e usá-lo offline?
Sim. O SVG Wave Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.