Open menu

SVG Wave Generator

Create unique wave shapes for headers, footers and section edges. Set the number of points and the height variation, choose smooth curves, sharp peaks or steps, stack up to four layers that fade into the distance, and fill them with a solid color or a gradient. Every click of New random wave gives you a fresh shape you can save, share or export as an SVG file, inline HTML, a CSS background or a React component.

Preset gallery

Accessibility checks

  • Pass The inline SVG is aria-hidden, so it stays out of the accessibility tree.
  • Pass 1 layer(s) with 5 points: a small file.

Export code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M0 320 L0 155.5 C48 153.3 192 132.4 288 142 C384 151.6 480 210.4 576 213.3 C672 216.3 768 163.9 864 159.7 C960 155.5 1056 193.7 1152 188.3 C1248 182.9 1392 137.5 1440 127.3 L1440 320 Z" fill="#4F46E5"/></svg>
Favourites on this device (0)

No favourites yet.

Wave shape
Style
Position
Colors
Wave color
Background

How to use the SVG wave generator

  1. Start from a preset or press New random wave until you like the shape.
  2. Shape it. More points make a busier wave; more height variation makes it more dramatic. Switch between smooth, peaks and steps.
  3. Add layers (up to four) and decide whether back layers fade.
  4. Color it with a solid color or a two-color gradient, and set the background behind it.
  5. Place it at the bottom or top, flip it, and set the height.
  6. Export the SVG file, inline HTML, a CSS background or a React component.

How smooth curves are drawn

Smooth waves use a Catmull-Rom spline converted to cubic Bézier curves. Each curve segment’s control points come from the neighbouring points, so the line passes exactly through every point with no sharp corners. The path then closes along the bottom of the 1440 × 320 box, and preserveAspectRatio="none" lets it stretch to any width.

Worked examples

Example 1: a hero section that flows into content

Load Layered ocean, keep it at the bottom and set its height to 200px. Put it as the last element of your hero, with the hero’s background color behind it and the wave color matching the next section. The three fading layers make the transition feel soft.

Example 2: a skyline for a city guide

Load Skyline: stepped outlines with lots of points look like buildings. Set the color to near-black and place it above your footer for a striking silhouette.

Load Gradient fire and choose Top so the wave hangs into your footer. Gradients look best with fewer points, so try 5–7 for broad, glowing shapes.

Tips

  • Keep the wave’s height moderate on mobile. It stretches horizontally but keeps its pixel height.
  • Use the CSS export when you can’t change the HTML, for example in a CMS theme.
  • Save shapes you like as favourites: the seed is stored, so you get exactly the same wave later.
  • Waves are decorative, so the inline SVG is hidden from screen readers.

Frequently asked questions

How are the waves generated?

The tool places points evenly across the width and gives each a random height around a base line, using a seeded random generator. The same seed always produces the same wave, so share links and favourites reproduce it exactly. Smooth waves draw a cubic Bézier curve through the points; peaks use straight lines; steps use flat segments.

What's the difference between the SVG and CSS exports?

The SVG and HTML exports give you markup you can place anywhere. The CSS export embeds the wave as a background image in a data URI, so you can add it to an existing element without extra markup.

How do layered waves work?

Each layer gets its own random shape and a slightly lower base line. With Fade back layers on, the back layers become more transparent, which creates a sense of depth like waves rolling towards the viewer.

Can I use a wave at the top of a section?

Yes. Choose Top, and the wave is mirrored vertically so it hangs down from the top edge. Flip horizontally changes its direction.

How do I stop a gap showing under the wave?

Give the SVG display: block, so it doesn't sit on the text baseline, and set its fill to the same colour as the next section's background.

Sources