Design / SVG

SVG Wave Generator for Section Dividers

Generate smooth, layered SVG waves for the edge between two page sections: choose the number of layers, waves, height, smoothness, and colour, then download the SVG or copy it as a CSS background.

SVG Wave Generator for Section Dividers: Each layer is a row of points alternating above and below a baseline by a random amount, joined with a smooth curve and filled down to the bottom edge. Back layers are paler, so the layers read as depth. The SVG stretches to any width, and the CSS version embeds it as a data URI background. Runs 100% locally in your browser with zero server file uploads.

Category: Developer tools
Runs: In your browser
Cost: Free · no sign-up
Availability: Ready to use

SVG wave generatorLocal processing

Runs entirely in your browser

Layers3Waves across3Height of the waves60%Smoothness1Image height240 pxColour#479d1d Flip upside down (for the top of a section)

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

The SVG stretches to any width (preserveAspectRatio="none"), so it fits full-width section dividers. Put it at the bottom of one section with the next section's background colour, or flip it for the top. The same random seed always draws the same wave.

SVG or CSS?

Inline SVG can be styled and animated from CSS, and its fill can use currentColor. As a CSS background, the SVG is a data URI: nothing extra to load, but the colour is fixed in the code. The file is a few hundred bytes either way; it can be tidied further with the SVG cleaner.

Smoothness

The curve is a Catmull-Rom spline converted to cubic Bézier segments: at full smoothness it bends gently through every point, and at zero it becomes straight lines between them, giving a jagged mountain edge.

How to use it

Set the layers, number of waves, and their height.
Pick a colour, and flip the wave for the top of a section.
Click for new random waves, then download the SVG or copy the CSS.

Privacy & limitations

Waves are drawn in your browser.

Related tools

Frequently asked questions

How do I use it between two sections?

Give the wave the colour of the section below and place it at the bottom of the section above, full width; flip it to use it at the top of a section instead.

Will the same settings give the same wave?

Yes: the shape comes from a random seed, so it only changes when you click for a new wave.

Can I use the waves commercially?

Yes: the shapes are generated for you and carry no licence restrictions.

Free tool · runs in your browser · no account required