Home › Developer Tools › SVG Wave Generator

SVG Wave Generator

Generate smooth or peaked layered waves for hero sections, headers and footers. Randomize until you like the shape, pick your colors and export a lightweight SVG, a PNG, or ready-to-paste CSS.

Layers 3

Complexity 6

Wave height 50%

Smoothness 100%

Canvas height 320px

Back color

Front color

Direction

Background

Fill

Fade back layers Mirror horizontally Seamless edges

PNG scale

How to use the SVG Wave Generator

Choose the number of layers and click Randomize until you like the shape.
Adjust complexity, height and smoothness. Low smoothness gives sharp peaks, high gives soft curves.
Pick the colors: the back layer uses the first color, the front layer the second, with blends in between.
Set the direction: bottom for a header or hero divider, top for a footer.
Export: download the SVG or PNG, or copy the CSS background or HTML snippet into your site.

How the waves are drawn

Each layer is a single SVG <path>. The generator places evenly spaced points across the 1440-unit-wide canvas, moves each one up or down by a random amount (the wave height setting), and joins them:

Smoothness 100%: a Catmull-Rom spline through the points, converted to cubic Bézier commands (C). Each control point is placed one sixth of the way along the line between the neighbouring points.
Smoothness 0%: straight lines (L) between the points, for sharp peaks.
Values in between scale the control points, giving softer or tighter curves.

The path is then closed along the bottom (or top) edge so it can be filled. The randomness is seeded, so the same settings always redraw the same wave until you click Randomize.

Using the wave on your website

Output	Best for	How to use it
HTML divider	Between two page sections	Paste it between the sections. It scales with the page width; set a fixed `height` on the SVG to stretch it instead (it uses `preserveAspectRatio="none"`).
CSS background	Hero banners, headers, footers	Add the class to the section. The wave is inlined as a data URI, so there is no extra HTTP request.
SVG file	Design tools, image tags, CMS uploads	Use with `<img src="wave.svg" alt="">` or import into Figma, Illustrator or Inkscape.
PNG	Email, slides, social graphics	Export at 2x or 3x for sharp results on high-density screens.

Design tips

Match the front color to the background of the section that follows, so the wave looks like the edge of that section.
Use 2 to 3 layers with colors from the same hue for depth without visual noise.
Keep the canvas height low (120 to 200px) for subtle dividers and taller for hero backgrounds.
Decorative waves should be hidden from screen readers; the HTML output already includes aria-hidden="true".

Frequently asked questions

How do I use an SVG wave as a section divider?

Place the SVG directly under (or above) the section with display:block and width:100%, and give it the same color as the next section. Use the HTML divider output, which adds preserveAspectRatio="none" so the wave stretches across any screen width.

How do I use the wave as a CSS background?

Copy the CSS output. It puts the SVG into a data URI inside background-image, with background-size and background-position set so the wave sits at the bottom or top of the element. No extra file is needed.

Should I use SVG or PNG for waves?

SVG for websites: it is a few hundred bytes, sharp at any size and easy to recolor. Use PNG for tools that do not accept SVG, such as some email builders, slide software or social media designs.

What does the smoothness setting do?

The wave passes through a set of random points. At 100% the points are joined with smooth Catmull-Rom curves converted to cubic Bezier curves; at 0% they are joined with straight lines, which gives sharp mountain-like peaks.

Can I make a wave that repeats seamlessly?

Yes. Turn on Seamless edges: the first and last points get the same height and matching curve direction, so copies placed side by side join without a visible seam.

Are the generated waves free to use?

Yes. The shapes are generated randomly in your browser and you can use them in personal and commercial projects without attribution.

Related tools