Super Boring Tools

Search tools

Find a tool by name or what it does.

SVG Wave Generator

Design smooth SVG wave dividers for the top or bottom of a section, then copy the markup or download the file.

Preview
Shape
Layers
Orientation
Fill color
SVG markup

Everything runs in your browser. Nothing is uploaded.

How to make an SVG wave divider

  1. Shape the wave

    Drag the amplitude slider to set how tall the wave is and the complexity slider to set how many peaks span the width, then choose how many layers stack for depth.

  2. Set the color and side

    Pick a fill color with the swatch or type a hex value, and use flip to move the wave between the top and bottom edge of the section.

  3. Randomize for variety

    Press Randomize to reshape the peaks into an irregular, more organic wave that stays smooth, then fine-tune the sliders from there.

  4. Copy or download

    The preview and the markup update as you adjust anything, so copy the SVG into your code or download a ready file when it looks right.

Why use this tool

Smooth, layered waves

Stack up to four wave layers at stepped opacity to build depth, from a single clean curve to a rich multi-tone divider.

Full control over the shape

Amplitude sets the wave height, complexity sets how many peaks span the width, and flip moves the wave between the top and bottom edge.

Any fill color

Set the fill with a color swatch or a hex value. Extra layers reuse the same color at lower opacity so the divider stays on palette.

Randomize for organic shapes

One button reshapes the peaks into an irregular, hand-drawn wave while keeping every curve smooth, so no two dividers have to look alike.

Copy the code or download the file

Take the SVG markup for a stylesheet or component, or download a ready .svg file. The preview always matches the output exactly.

Runs entirely in your browser

The SVG is generated on your device. Nothing is uploaded, and there is no account or quota.

About this tool

The SVG wave generator draws the smooth, wavy shapes designers use to divide one section of a page from the next. Instead of hand-editing path coordinates or guessing at control points, you move a few sliders and watch the wave redraw in real time. Amplitude controls the height of the peaks, complexity controls how many peaks span the width, and a layer count stacks two, three, or four waves at decreasing opacity so the divider reads with depth rather than as a single flat curve.

Every wave is a smooth path, so it stays crisp at any width and scales cleanly on retina screens. Flip moves the wave to the top or bottom edge depending on which section it caps, and the fill accepts any hex color, with the extra layers tinting the same color so the result stays on palette. Randomize keeps the curve smooth but varies the peak heights for a looser, more hand-drawn look. When you like what you see, copy the markup straight into an HTML page, a stylesheet background, or a component, or download a .svg file. If you need a raster version for an email or a social image, run the file through the SVG to PNG converter.

Nothing is uploaded and there is no account. The SVG exists only in your browser tab. The gradient generator pairs well for building the section backgrounds the wave sits between.

Frequently asked questions

How does the wave generator work?
You set the amplitude, complexity, layer count, flip, and fill color, and the tool builds a smooth SVG path from those values. The preview and the markup below it are produced from the same settings, so the code you copy is exactly what you see.
What do amplitude, complexity, and layers do?
Amplitude is the height of the wave, so higher values give taller peaks. Complexity is the number of peaks across the width, so lower values give a few broad rolls and higher values give many tighter ripples. Layers stack additional waves behind the first one at lower opacity for a sense of depth.
Can I put the wave at the top or the bottom of a section?
Yes. The flip control mirrors the wave vertically so the flat edge is on the top or the bottom. Use the default to cap the top of a section and flip it to cap the bottom.
What format is the output?
The output is an SVG, so it stays sharp at any size and paste into an HTML page, a stylesheet, or a component. Each layer is a filled path. If you need a raster image instead, convert the SVG to a PNG with the SVG to PNG tool.
Why does each randomized wave look a little different?
Randomize varies the height of each peak to give the wave an organic, less uniform shape while keeping the curve smooth. Leave it alone for a clean, even wave, or press it until you find a shape you like. The sliders still work afterward.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.

Related tools