SVG Wave Generator
Layered SVG waves for section dividers and hero backgrounds — set amplitude, wave count, complexity and per-layer opacity, then copy SVG or CSS, or save a PNG.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" width="1440" height="320" preserveAspectRatio="none"> <path d="M0,40 C28.33,60.94 56.67,80 85,80 C113.33,80 141.67,60.94 170,40 C198.33,19.06 226.67,0 255,0 C283.33,0 311.67,19.06 340,40 C368.33,60.94 396.67,80 425,80 C453.33,80 481.67,60.94 510,40 C538.33,19.06 566.67,0 595,0 C623.33,0 651.67,19.06 680,40 C708.33,60.94 736.67,80 765,80 C793.33,80 821.67,60.94 850,40 C878.33,19.06 906.67,0 935,0 C963.33,0 991.67,19.06 1020,40 C1048.33,60.94 1076.67,80 1105,80 C1133.33,80 1161.67,60.94 1190,40 C1218.33,19.06 1246.67,0 1275,0 C1303.33,0 1331.67,19.06 1360,40 C1386.67,59.71 1413.33,78.01 1440,79.83 L1440,320 L0,320 Z" fill="#60a5fa" fill-opacity="1"/> <path d="M0,68.28 C28.33,83.09 56.67,83.09 85,68.28 C113.33,53.47 141.67,26.53 170,11.72 C198.33,-3.09 226.67,-3.09 255,11.72 C283.33,26.53 311.67,53.47 340,68.28 C368.33,83.09 396.67,83.09 425,68.28 C453.33,53.47 481.67,26.53 510,11.72 C538.33,-3.09 566.67,-3.09 595,11.72 C623.33,26.53 651.67,53.47 680,68.28 C708.33,83.09 736.67,83.09 765,68.28 C793.33,53.47 821.67,26.53 850,11.72 C878.33,-3.09 906.67,-3.09 935,11.72 C963.33,26.53 991.67,53.47 1020,68.28 C1048.33,83.09 1076.67,83.09 1105,68.28 C1133.33,53.47 1161.67,26.53 1190,11.72 C1218.33,-3.09 1246.67,-3.09 1275,11.72 C1303.33,26.53 1331.67,53.47 1360,68.28 C1386.67,82.22 1413.33,83.37 1440,70.77 L1440,320 L0,320 Z" fill="#3b82f6" fill-opacity="1" transform="translate(0 58.67)"/> <path d="M0,80 C28.33,80 56.67,60.94 85,40 C113.33,19.06 141.67,0 170,0 C198.33,0 226.67,19.06 255,40 C283.33,60.94 311.67,80 340,80 C368.33,80 396.67,60.94 425,40 C453.33,19.06 481.67,0 510,0 C538.33,0 566.67,19.06 595,40 C623.33,60.94 651.67,80 680,80 C708.33,80 736.67,60.94 765,40 C793.33,19.06 821.67,0 850,0 C878.33,0 906.67,19.06 935,40 C963.33,60.94 991.67,80 1020,80 C1048.33,80 1076.67,60.94 1105,40 C1133.33,19.06 1161.67,0 1190,0 C1218.33,0 1246.67,19.06 1275,40 C1303.33,60.94 1331.67,80 1360,80 C1386.67,80 1413.33,63.32 1440,43.69 L1440,320 L0,320 Z" fill="#2563eb" fill-opacity="1" transform="translate(0 117.33)"/> </svg>
Each layer stacks with a shifted phase; turn the front ones down in opacity and they read as depth. Take the SVG as markup, the CSS to use it as a background, or the PNG where only a raster will do — the PNG keeps a transparent background unless you set one.
🔒 Runs in your browser — nothing is uploaded.
Layered SVG waves for dividers and hero backgrounds
This generator builds a clean, self-contained <svg> made of smooth sine-wave paths — the kind used for angled section dividers between coloured blocks and for soft, layered hero backgrounds. Set the amplitude (how tall the wave is) and the wavelength (how wide each cycle is), or say how many waves cross the width instead of dividing the box in your head. Turn up complexity to fold a second and third harmonic in, so the crests stop repeating; choose the canvas size; and stack up to six layers, each with its own colour and opacity. Pick a solid fill, a stroked line or a gradient fade, add a background colour or leave it transparent, and flip the shape to sit at the top or bottom of a section. A live preview updates as you drag each slider, and Random gives you a whole new wave in one press.
Copy-paste or download, no dependencies
The output is plain SVG with a viewBox and preserveAspectRatio="none", so it stretches to any container width without a JavaScript library, image, or web request. Copy the markup straight into your HTML or a component, switch the output to CSS for a ready-made background-image rule that needs no extra element, download it as an .svg, or save a PNG — which keeps a transparent background unless you set one. Every path is generated deterministically in your browser, so the same settings always produce the same shape.
Frequently asked questions
How do I use the SVG as a section divider?
Paste the SVG at the top or bottom of a section and give it width:100%. Because it uses a viewBox with preserveAspectRatio="none", it stretches to the full width of any container. Use the Flip toggle to put the wave on the bottom of a section instead of the top. Or switch the output format to CSS and paste the rule onto the section itself — it carries the whole wave in a data URI, so there is no extra element and no second request.
What do amplitude and wavelength control?
Amplitude is the height of the wave peaks in pixels — larger means taller, more dramatic waves. Wavelength is the horizontal length of one full cycle — smaller means more, tighter waves across the width. Complexity folds a second and third harmonic in, so the crests stop being copies of one another. Adding layers stacks phase-shifted copies; turn the front ones down in opacity and they read as depth.
Can I save it as a PNG?
Yes. Choose PNG image as the output format and the wave is rasterized at the canvas size you picked. Nothing is painted behind it, so the PNG keeps a transparent background unless you set a background colour — it drops onto a coloured block without a white box around it. For anything that has to stretch, the SVG is still the better file.