Design a smooth wave divider — copy or download the SVG.
Stacked sections with hard horizontal edges make a page feel like a stack of boxes. A curved divider between them softens the transition and signals that the content has changed — which is why the pattern appears on so many well-designed landing pages.
Building that curve by hand means writing SVG path data with bezier control points, and adjusting it means recalculating numbers by hand. This SVG wave generator replaces that with three controls and a live preview.
Amplitude sets the height of the curve. Low values give a barely-there ripple; high values give a pronounced swell that eats more vertical space.
Frequency sets how many curves appear across the width. One or two reads as elegant. Push it higher and the shape becomes rhythmic, closer to a pattern than a divider.
Colour sets the fill, so the wave can match the section it separates.
The SVG path regenerates instantly as you adjust, so you tune by looking rather than by calculating. That feedback loop is the difference between finding the right shape in thirty seconds and abandoning the idea.
Two export routes suit two different workflows.
Copy SVG puts the markup on your clipboard for pasting inline into your HTML. Inline SVG is worth preferring when you want the shape to inherit colour from CSS, animate, or respond to a theme switch — it stays part of the DOM.
Download .svg gives you a file to use as a background image, drop into a design tool, or hand to a developer. Best when the wave is decorative and does not need to interact with anything.
Both give you the same shape; the choice is about how it will behave once placed.
The standard approach: place the wave at the boundary between two sections, matching its fill to the colour of one of them so the curve appears to be the edge of that block rather than a separate element.
A few practical points. Set the SVG to span the full width so no gap appears at the edges on wide screens. Test at mobile width, because a wave that reads as gentle on a desktop monitor can look dramatic on a narrow viewport. And keep the amplitude modest if the divider sits near text — a tall curve pushes content down and creates awkward gaps.
Used once or twice, a CSS wave section divider adds polish. Used between every section, it becomes noise.
A developer is building a landing page where a deep navy hero sits directly above a white features section. The join is a flat line, and the page looks like two rectangles.
He opens the generator, sets amplitude fairly low for a subtle curve, leaves frequency at two, and sets the colour to the same navy as the hero. He copies the inline SVG, pastes it at the bottom of the hero section, and sets it to full width.
The hero now appears to flow into the section below. One paste, no path maths, and the shape can be recoloured later from CSS because it is inline.
SVG path syntax is precise and unforgiving. A cubic bezier curve across a full-width divider involves several coordinate pairs, and changing the wave height means recalculating all of them. Most developers who try end up with something close to what they wanted and stop there.
Adjusting a slider and watching the shape respond gets you the curve you actually pictured, and takes less time than opening the documentation.
Front-end developers building marketing pages. Designers prototyping section transitions. WordPress and site-builder users who need clean markup to paste into a custom HTML block. Anyone who wants a custom wave shape without opening a vector editor. The CSS Gradient Generator and CSS Clip-path Generator handle the other two common section treatments.
A flat edge between two sections is a missed detail that takes two minutes to fix. Adjust the sliders in the SVG wave generator above until the curve looks right, then copy the code straight into your page.
Need the wave as a flat image instead of inline code? Our free SVG to PNG Converter exports it in seconds.
Everything you might be wondering about the SVG Wave Generator.
Hand-picked free tools that pair well with the SVG Wave Generator.
Practical reads on the topics this tool touches.
Join our newsletter to receive automation tips, product updates, and business insights.
