What the wave generator makes
This wave generator draws a filled wave shape across a canvas: one smooth curve from the left edge to the right, closed along the bottom or the top so it fills the space below or above the line. Crests sets how many peaks run across the width, amplitude how tall they are, and smoothness whether the curve is round or made of straight lines, which gives a zigzag. The variation slider lets the seed move every peak a little, so the wave stops looking like a textbook sine curve and gets the loose, hand-drawn feel that layered backgrounds live from.
Up to six layers stack behind each other, each one higher than the last by the layer offset and with its own crests. The color mode decides how the layers differ: shades of one base color, one color in fading tints, a blend between two colors, or a gradient on every layer. The front layer is always fully opaque, so it joins the section below it without a visible edge.
How designers use waves
- Section dividers: a wave at the bottom of a colored hero softens the hard line to the white content below. Match the front color to the hero background, place the SVG at the bottom edge, and the two look like one shape.
- Footers and headers: a wave on the top edge of a dark footer, or at the top of a page under a navigation bar. Switch the edge with the segment above the preview.
- Backgrounds: a tall canvas with several layers at low opacity makes a calm background for a card or a slide. Keep the amplitude low and the smoothness high for a quiet result.
- Repeating strips: with Repeat sideways on, a flat wave runs across any width as a CSS background, for a banner, a pricing table or a print layout.
- Print and slides: export a PNG at 2880 or 3840 px for slides and posters, or the SVG for print work where the edge must stay sharp.
SVG or PNG for a wave?
A wave is the ideal case for SVG: a handful of path commands, a few colors, and a file of one or two kilobytes that scales to any screen without losing sharpness. On a website, inline the SVG code so you can change the fill with CSS, use it as an img, or copy the CSS, which puts the SVG into a background-image with the right aspect ratio. The PNG is a fixed picture for tools that do not accept SVG. It keeps the empty part of the canvas transparent unless you set a background color, and you choose its width, the height follows the proportions of the canvas.
How the seamless repeat works
A shape repeats without a seam when its right edge continues exactly into its left edge. For a wave that means two things: the curve must end at the same height where it started, and the direction of the curve at the end must match the direction at the start. With Repeat sideways on, the generator fixes the last point to the first and computes the curve at both ends as if the wave continued on the other side. Copies placed next to each other then form one long wave. The preview shows two copies so you can check the join in the middle, and the CSS uses repeat-x so the browser does the repeating. The blob generator uses the same idea in both directions for textures.
How to use the wave generator
- 1Choose Bottom edge or Top edge, depending on where the wave meets the next section.
- 2Pick a preset, then set crests, amplitude and smoothness. Turn variation up and press Shuffle for a looser shape.
- 3Add layers and set the wave height, the layer offset and the opacity of the back layer.
- 4Pick a color mode and your colors. Use the background color of the next section as the front color.
- 5Set the size to the proportions of the space on your page, turn on Repeat sideways for a strip, then download the SVG or PNG, copy the SVG code, the CSS or a link.
Frequently asked questions
How do I put the wave between two sections of a page?
Give the lower section the color of the wave and place the SVG at the bottom of the upper section, or the other way round for a top edge. Inline the SVG code, use it as an img, or copy the CSS, which puts it into a background-image on a block with the right aspect ratio. Set the fill color to the background of the section the wave belongs to, and the join is invisible.
Why does the wave look stretched or squashed on my page?
Because the SVG keeps its own aspect ratio by default and is scaled to fit the box. If the box is wider than the wave, you get empty space, if it is narrower, the wave is letterboxed. Set the width and height here to the proportions of the space on the page, or add preserveAspectRatio="none" to the svg tag so the browser stretches it to the box.
What does the seed do?
Every crest can be moved sideways and up or down by a random amount, and the variation slider decides how much. The random numbers come from the seed, so the same seed with the same settings always gives the same curve. Shuffle changes the seed, the share link carries it, and a variation of 0 gives a regular wave where the seed makes no difference.
How does the horizontal repeat stay seamless?
With Repeat sideways on, the curve ends at exactly the height where it started, and the tangent at the end matches the tangent at the start, so the next copy continues the curve without a kink. The preview shows two copies side by side. Use the CSS with repeat-x, or the SVG as a pattern, to run the wave across any width.
SVG or PNG for a section divider?
SVG, almost always. A wave is a few short paths, so the file is tiny and stays sharp on every screen, and you can still change the colors in the code. Take the PNG for tools that do not accept SVG, like some email, slide or video editors, and pick a width at least as wide as the space it fills. The PNG keeps the area above or below the wave transparent unless you set a background color.
Can the wave have a gradient?
Yes. The Gradient color mode fills every layer with a linear gradient from the first to the second color at the angle you set. Shades lightens one base color toward the back, Tint keeps one color and lowers the opacity of the back layers, and Two colors blends from the second color at the back to the first in front.