Wave background generator

Waves earned their place in web design by solving a specific problem: the hard horizontal line where one coloured section meets the next. A straight edge is honest but abrupt, and a page built from stacked bands of colour can end up looking like a stack of boxes. A curve across that boundary softens the transition and, more usefully, suggests the page continues rather than stopping. That is the divider job, and it is the one waves are best at.

The second job is filling a hero. Here the waves occupy the lower part of the frame while the heading sits in the clear space above — which is how the background in the editor is composed, with the upper third deliberately left open. This works because the eye reads the curve as ground and the empty area as sky, giving the text somewhere to sit without needing a box or an overlay behind it.

The job waves do badly is carrying content in the middle of the bands. Once text crosses the crest line, it has two different backgrounds behind it — a pale band above, a saturated one below — and the contrast ratio changes halfway through a sentence. If your layout forces that, the fix is the scrim control, which washes one side of the image toward the canvas colour and gives the text a consistent field; the alternative is a gradient overlay in CSS, which does the same thing but keeps the exported file reusable elsewhere.

Subtlety is mostly a function of two settings. Density controls the number of bands, and a small number of broad waves reads as deliberate while a large number reads as texture — both are useful, but they are different design decisions and worth making on purpose. The palette then decides how much the bands separate from one another: a single-hue palette keeps every band in one colour family and produces something you can put behind body text, while a two-colour palette gives you a graphic that wants to be the focus.

A practical note on exporting. If the wave is going behind a full-width section, take the SVG and let it scale; a raster has to be exported for the widest screen you intend to support, and that file is then downloaded by every phone as well. If the wave is going into something that does not understand vectors — a video call background, a desktop wallpaper, a slide deck that flattens images — take the PNG at 16:9, which exports 1920×1080 and covers all three cases without further thought.