Skip to content
FR

SVG wave generator

Create SVG waves to separate a website's sections: layers, amplitude, smooth, peaked or stepped style. Download the SVG or copy the CSS code.

  • Free
  • No sign-up
  • No file uploaded
  • Windows, Mac, Android, iPhone

Loading the tool…

About this tool

Draw waves for the transition between two sections of a page: 1 to 4 stacked layers, amplitude, number of bumps, smooth, peaked or stepped style, color and orientation. Download the SVG file or copy the SVG or CSS code, ready to paste.

When to use it

Landing pages

A wave below the hero banner softens the transition to the content and gives a modern style.

Footers

A flipped wave above the footer nicely frames the bottom of the site.

Visuals and presentations

The SVG imports into Figma, Canva or PowerPoint as an editable vector shape.

How to use

  1. Set the number of layers, the amplitude and the number of bumps.
  2. Click “New wave” until you find the right shape.
  3. Download the SVG or copy the code.

How it works

For each layer, points are spread across the width at random heights around a baseline, then joined with Bézier curves (smooth), segments (peaked) or steps. Layers get more opaque toward the front.

The randomness comes from a seeded generator: the same seed gives exactly the same wave. The CSS code encodes the SVG as a data: URL, usable directly as a background image.

Tips for best results

  • Give the wave the color of the next section for a seamless transition.
  • A low amplitude (20 to 40%) and few bumps look elegant.
  • On mobile, reduce the height: a wave stretched on a narrow screen looks very steep.
  • Multiple layers add depth; keep two or three.

Common problems and fixes

A thin line shows between the wave and the section

Pixel rounding creates a hairline. Add margin-bottom: -1px to the wave, or display: block to the SVG.

The wave looks distorted on mobile

It stretches with the width: reduce its height with a media query.

I want the wave the other way

Tick “Wave at the top” to place it below a header.

Frequently asked questions

How do I use the wave on my site?

Paste the SVG code between two sections, or use the provided CSS: it sets the wave as the background image of a divider block, with no file to host.

Does the wave adapt to the width?

Yes: the SVG uses preserveAspectRatio="none" and stretches across the full screen width.

Can I get a wave back?

Yes: each wave comes from a random seed saved with your settings; it stays the same on your next visit.

Is the SVG lightweight?

A few hundred bytes: far lighter than an image, and sharp on every screen.

Related searches

Still stuck?

Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.