Generate beautiful SVG wave shapes for backgrounds, section dividers, and hero sections. Customise layers and export as SVG, PNG, or CSS.
This SVG wave generator builds smooth, customisable wave shapes you can drop straight into a website — the curvy dividers you see between hero sections and the rest of a page, or as a wavy background behind content. You shape the wave with amplitude, frequency and phase sliders, stack up to three coloured layers for depth, then export the result as SVG markup, a CSS background-image data URI, or a retina PNG.
Because the output is real SVG, it stays razor-sharp at any size and weighs almost nothing. People use it to:
Everything runs locally in your browser — the wave is generated in-browser with JavaScript, so nothing you create is uploaded, and the SVG and CSS you copy are entirely yours.
background-image data URI, or download an SVG or 2× PNG, and drop it into your site.An SVG wave divider is a curvy vector shape placed between two sections of a page so the transition from one block to the next looks like a flowing wave rather than a straight edge. Because it is SVG, it scales to any width without blurring and stays a tiny file size.
Drag the amplitude, frequency and phase sliders. Amplitude controls wave height, frequency controls how many peaks fit across the width, and phase slides the whole wave left or right. Combining different values gives you endless unique shapes — start from a preset and nudge the sliders for a fresh look.
Each layer is a separate wave path with its own colour, opacity, vertical offset and phase shift. Stacking two or three semi-transparent layers at slightly different offsets creates a sense of depth, like overlapping ripples. Hide a layer with its Show/Hide button if you want a single, simpler wave.
Yes — set the background and each layer's fill with the colour pickers or by typing a hex value. The generator outputs solid fills per layer; to add a gradient, copy the SVG and replace a layer's fill with a <linearGradient> referenced by id, or pair the wave with our CSS Gradient tool for the background behind it.
Copy the SVG markup when you want to drop the shape directly into your HTML and style or animate individual paths. Copy the CSS background-image data URI when you'd rather apply the wave as a background on an existing element without adding extra markup. Both produce identical visuals.
Place the SVG at the bottom of one section with width:100% and display:block, and give it a viewBox with preserveAspectRatio="none" so it stretches edge to edge. Match the wave's background colour to the section above it and the fill colour to the section below for a seamless transition.
Yes on both counts. SVG is resolution-independent, so the wave renders crisply on retina displays and at any width without blur. Every wave you generate is free to use in any project, commercial or personal, with no attribution required.