Free SVG Wave Generator

Wave dividers became a defining trend in 2020-era web design — replacing the flat horizontal lines between sections with curved transitions that soften the visual jump from one block to the next. Sites like Stripe, Slack, and countless SaaS landing pages popularized the look, and it's now a standard tool in modern web design.

The shape is mathematically simple — a sinusoid stretched across the page width — but the visual variety is huge. Frequency, amplitude, phase, and decay tune everything from a gentle near-flat ripple to a dramatic tsunami curl. The right wave for a calm productivity app is wildly different from the right wave for an adventure brand.

This generator builds the wave as alternating peak / trough vertices with horizontal tangent handles, plus two corner anchors at the bottom. The result is a closed shape ready to drop into a section divider or use as a hero background.

Section divider pattern: place a full-width wave SVG between two sections. The wave's fill matches the section ABOVE; the section BELOW shows through where the wave dips. This creates a smooth visual transition.

Inverted wave (rotate 180°): place at the top of a section instead of bottom. Same idea, different visual: the section's top edge has a wave instead of being flat.

CSS animation: wrap the SVG in a container, animate the SVG's `phase` value via CSS variables to create flowing wave motion. Subtle (5–10s loop) keeps it elegant; faster reads as playful.

Subtle waves (amplitude 0.15–0.25) read as professional / calm. Aggressive waves (0.5+) read as playful / dynamic. Match the wave personality to the brand voice.

Even frequency (2 or 3 cycles) reads more orderly than odd. Try amplitude 0.25 + frequency 2 for the safe modern-SaaS look.

Gradient fill almost always beats solid color — the gradient implies depth / dimensionality, perfect for water, sky, or atmospheric metaphors.

End-decay smooths the wave to flat at the edges — useful when the wave divider sits between sections of different background colors and you don't want sharp peaks at the page edges.