elefcode

SVG Wave Generator

Make wave dividers for page sections — copy the SVG, a CSS background or a React component.

Section above
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none">
  <path d="M0 177.1C60 162.5 240 100.2 360 89.2C480 78.1 600 99.7 720 111C840 122.3 960 145.3 1080 157.1C1200 168.9 1380 177.5 1440 181.5L1440 320L0 320Z" fill="#6366f1" fill-opacity="0.35"/>
  <path d="M0 170.4C60 160.6 240 106.5 360 111.7C480 116.9 600 185.9 720 201.6C840 217.3 960 212.3 1080 206C1200 199.8 1380 171.2 1440 164.3L1440 320L0 320Z" fill="#6366f1"/>
</svg>

preserveAspectRatio="none" lets the wave stretch to any width. Set the wave's colour to the next section's background so the two join seamlessly.

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.

How do I use the wave as a CSS background?

Choose CSS background: the SVG is embedded as a URL-encoded data URI, which is smaller than base64, and stretched to the element with background-size: 100% 100%.

Is anything uploaded?

No. The wave is generated entirely in your browser.

Learn more

GuideSVG Wave Dividers: Curved Section Breaks