elefcode

SVG Wave Generator

Create smooth wave dividers for page sections — copy the SVG or download it.

SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none">
  <path d="M 0 143.9 Q 180.0 143.9 360.0 123.3 Q 540.0 102.6 720.0 122.9 Q 900.0 143.2 1080.0 142.9 Q 1260.0 142.6 1440.0 166.7 L 1440 320 L 0 320 Z" fill="#6366f1" fill-opacity="0.35"/>
  <path d="M 0 158.0 Q 180.0 158.0 360.0 133.7 Q 540.0 109.3 720.0 133.8 Q 900.0 158.2 1080.0 188.3 Q 1260.0 218.4 1440.0 205.6 L 1440 320 L 0 320 Z" fill="#6366f1" fill-opacity="1.00"/>
</svg>

Advertisement

Guide

About the SVG Wave Generator

Flat, straight edges between page sections look dated. A wave divider — a curved SVG shape sitting between two sections — adds depth and makes a landing page feel designed. This generator builds those waves for you: adjust the amplitude and complexity, stack a few translucent layers, pick a color, and copy the SVG.

The output is a clean, scalable SVG with no dependencies. Drop it between two sections and it stretches to any width.

How to use the wave in a page

Paste the SVG directly into your HTML between two sections, and give it display: block and width: 100%. Because the SVG uses preserveAspectRatio="none", it stretches edge to edge at any screen width. Set the wave color to match the section it flows into.

Layers create depth

A single wave reads as a simple curve. Stacking two to four waves at different opacities suggests depth, like overlapping hills — a look you'll recognize from modern SaaS landing pages. Use Shuffle to try different random variations until one feels right.

Why SVG rather than an image

SVG is vector, so the wave stays razor-sharp on any screen and at any width, and the file is tiny — usually well under a kilobyte. You can also recolor it by editing one attribute, which you can't do with a PNG.

How to use it

  1. 1Adjust amplitude and complexity to shape the wave.
  2. 2Add layers for a sense of depth, and pick your color.
  3. 3Flip it vertically if the wave should hang from the top.
  4. 4Copy the SVG or download the file, then place it between two sections.

Frequently asked questions

How do I add the wave between two sections?

Paste the SVG between the two sections in your HTML and set it to display block, width 100%. It stretches to the full width automatically.

Can I change the color later?

Yes. The color is a single fill attribute in the SVG, so you can edit it by hand or set it with CSS if you inline the SVG.

Why does my wave look stretched?

That is intentional — preserveAspectRatio is set to none so the wave spans any width. Adjust the height of the SVG in CSS to control how tall the curve looks.

Will it stay sharp on high-resolution screens?

Yes. SVG is vector-based, so it renders crisply at any size or pixel density.

Is anything uploaded?

No. The wave is generated entirely in your browser.

Related tools

clip-path GeneratorCSS GradientSVG OptimizerColor Converter