SVG Wave Generator

About SVG wave generator

Design a wavy section divider and export it as inline SVG or as a CSS background using a data URI. Each export holds a single wave layer, and you control its height, how many crests it has, its color and its opacity. It is meant for web designers who want soft transitions between page sections without loading an image.

How to use it

1. Set the Wave color, and a Background color that only affects the preview.
2. Drag Wave height from 10 to 180 pixels and Wave frequency from 1 to 12 waves.
3. Lower Opacity (10 to 100 percent) if you plan to overlay several dividers.
4. Click Flip wave to mirror it, so the fill hangs from the top instead of rising from the bottom.
5. Open the SVG markup tab or the CSS background tab under Output and copy the code.

The path for a single wave

Frequency 1, height 80, not flipped

d="M0 200 L0 100 C 400 140, 800 60, 1200 100 L1200 200 Z"

When to use it

• Separating a hero section from the next block with a curved bottom edge.
• Stacking two or three semi-transparent waves in one footer for a layered sea look.
• Embedding the SVG as a background-image in a stylesheet with no extra request.
• Making a wavy top border for a card or testimonial band.

Questions about SVG wave generator

What is inside the SVG?

A viewBox of 1200 by 200 with preserveAspectRatio set to none, containing one path made of cubic Bezier segments, so it stretches to any width without changing its shape logic.

Does the exported code include the background color?

No. The Background color is only painted behind the preview. The SVG carries just the wave fill and its fill-opacity.

How does the CSS export work?

It URL-encodes the SVG into a data URI and writes background-image, background-size of 100 percent by 100 percent and no-repeat, so the wave fills the element.

Is every crest the same size?

Yes. The width is divided into equal segments and each uses the same curve, giving a regular rhythm rather than a random one.

Related tools

• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• Border radius generatorGenerate simple, per-corner, or asymmetric blob border-radius values with live shape preview
• CSS clip-path generatorBuild polygon, circle, ellipse, and inset clip-path shapes with point editor and presets
• CSS stripe generatorBuild repeating-linear-gradient stripe backgrounds with custom colors, width, gap, and angle
• CSS pattern generatorGenerate dots, grid, diagonal, checkerboard, and cross CSS background patterns
• CSS noise generatorGenerate SVG feTurbulence grain and texture overlays — export as CSS ::after background or raw SVG