Skip to content
epitometool

SVG wave generator

CSS & UI generators

Create responsive SVG wave backgrounds with adjustable amplitude, wavelength and color.

Updated

Wave controls

Preview

SVG output

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 240" preserveAspectRatio="none"><path fill="#0ea5e9" d="M 0 240 L 0 110 L 0 110 L 20 123.012249 L 40 133.043548 L 60 137.795848 L 80 136.180455 L 100 128.567434 L 120 116.700839 L 140 103.299161 L 160 91.432566 L 180 83.819545 L 200 82.204152 L 220 86.956452 L 240 96.987751 L 260 110 L 280 123.012249 L 300 133.043548 L 320 137.795848 L 340 136.180455 L 360 128.567434 L 380 116.700839 L 400 103.299161 L 420 91.432566 L 440 83.819545 L 460 82.204152 L 480 86.956452 L 500 96.987751 L 520 110 L 540 123.012249 L 560 133.043548 L 580 137.795848 L 600 136.180455 L 620 128.567434 L 640 116.700839 L 660 103.299161 L 680 91.432566 L 700 83.819545 L 720 82.204152 L 740 86.956452 L 760 96.987751 L 780 110 L 800 123.012249 L 820 133.043548 L 840 137.795848 L 860 136.180455 L 880 128.567434 L 900 116.700839 L 920 103.299161 L 940 91.432566 L 960 83.819545 L 980 82.204152 L 1000 86.956452 L 1020 96.987751 L 1040 110 L 1060 123.012249 L 1080 133.043548 L 1100 137.795848 L 1120 136.180455 L 1140 128.567434 L 1160 116.700839 L 1180 103.299161 L 1200 91.432566 L 1200 240 Z"/></svg>

Quick start

How to generate SVG waves

Adjust amplitude and wavelength, then copy the SVG path output.

  1. Step 1
    Configure waveform

    Tune amplitude, wavelength, baseline and fill color.

  2. Step 2
    Inspect output

    Validate the responsive wave preview against your design.

  3. Step 3
    Copy SVG

    Paste the generated SVG into your HTML, Astro or React component.

In-depth guide

SVG wave generator

Create smooth, responsive SVG wave backgrounds for modern hero sections and visual dividers.

Wave generation math

The curve samples y = baseline + sin(2πx / wavelength) * amplitude across the viewport width, then closes the shape to form a fillable path.

Responsive usage

Use preserveAspectRatio="none" when the wave must stretch full-width, or keep default aspect ratio for decorative embeds.

How to use it

  1. Adjust amplitude, wavelength and the fill color to shape the wave.
  2. Flip the wave vertically to use it as a top or bottom divider.
  3. Copy the generated <svg> markup and paste it directly into your page, or use it as a CSS background.

Because the output is a single inline path, it scales crisply at any width with no extra HTTP request.

Pitfalls and privacy

Inline SVG inherits surrounding styles, so a stray fill or height rule can distort the wave — scope your CSS. For full-bleed dividers set preserveAspectRatio="none" and an explicit height, otherwise the wave keeps its aspect ratio and leaves gaps. The markup is generated locally in your browser; nothing is uploaded.

When to use it vs alternatives

Use this tool for quick browser-based work when you need an answer or output immediately. Use a dedicated application or automated workflow when you need bulk processing, approvals, or repeatable production rules.

Frequently asked questions

Can I use the SVG as a section divider?

Yes. The generated SVG is resolution-independent and ideal for hero or section separators.

What does wavelength control?

It controls horizontal distance between peaks. Lower values create tighter waves; higher values create broader waves.

Is this generated server-side?

No. The path math runs in your browser and never uploads data.

How do I make the wave stretch full width?

Set preserveAspectRatio="none" and an explicit height on the SVG so it fills the container edge to edge.

Does amplitude affect the height?

Yes. Amplitude controls the peak-to-trough height of the wave, while wavelength controls the horizontal distance between peaks.

Can I use the wave as a CSS background?

Yes. Inline the SVG as a data URI in background-image, or paste the markup directly into your HTML for a top or bottom divider.

Keep exploring

More tools you'll like

Hand-picked utilities that pair well with the one you're on — all free, client-side, and zero-signup.

More css & ui generators

See all →

Popular across EpitomeTool

Browse all →
Browse all 212+ free tools