SVG Wave Generator
Set the size, how high the wave sits, how tall and how many waves, and add some roughness. Copy the SVG, the path or a ready CSS background.
About SVG Wave Generator
A wave between two sections adds softness to a page without needing an image file. This generator draws the wave as an SVG path, so it stays sharp on any screen and weighs very little. You control the width and height, where the wave line sits, how tall each wave is and how many there are.
Add roughness to break the perfect sine shape, and use the seed to repeat a shape you like. Flip the wave to fill above it instead of below, and add a background colour if you want one. Copy the SVG markup, the raw path data or a CSS background line.
How to use SVG Wave Generator
- Set the width and height of the divider.
- Choose the number of waves, their height and where the wave line sits.
- Add roughness or press the button for a new random seed.
- Copy the SVG, the path or the CSS background.
Common uses
- Separating a hero from the next section
- Adding a curved footer edge
- Making a decorative band for a card or banner
- Creating a lightweight alternative to a background image
Frequently asked questions
Why is the SVG set to stretch?
The SVG uses a setting that stretches the shape to fill whatever box it is placed in. That is what you want for a divider that must span the full width of the page at any screen size.
What does the seed do?
It fixes the random part of the roughness. The same seed with the same settings always gives the same wave, so you can note it down and get the shape back later. At zero roughness the seed makes no difference.
How do I use the CSS background?
Paste the three lines onto an element that has a set height. The wave fills the element and stretches to fit it.
Can I change the colour later?
Yes. In the SVG markup, change the fill value on the path. If you use the CSS background, the colour is part of the image and must be changed in the code before you copy it.