Skip to content
Musterli

SVG Waves

Layered waves for sections, headers and backgrounds. Export as SVG, CSS or image.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Example motif made with the SVG Waves

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

SVG waves are lightweight vector graphics that softly separate the sections of a website. Instead of a hard edge, one surface flows into the next. Several layers in graded colors add depth while the file stays just a few kilobytes.

How it works

Choose the number of layers and points, set amplitude, smoothness and coverage, and decide whether the waves rise from the bottom or hang from the top. Press Space for new variations. Export as SVG, CSS background or image.

Try the SVG Waves now

FAQ

How do I place a wave between two sections?
Download the SVG and put it at the bottom of the upper section. Use the background color of the next section as the wave color and both blend seamlessly.
Does the wave stay sharp on wide screens?
Yes. As a vector graphic it scales without losing quality. Set its width to 100 percent in CSS and let the height follow.
What does smoothness do?
It sets how softly the curve runs between points. Low smoothness gives jagged, mountain-like shapes, high smoothness calm, rounded waves.
Can I flip the waves?
Yes. The direction setting decides whether the waves rise from the bottom or come down from the top.

Related generators

All generators in Backgrounds