SVG Wave Generator

Generate smooth, responsive wave dividers for section backgrounds and hero footers. Shape the curve, pick a color, and copy the SVG — all in your browser, no upload.

Preview

Amplitude40px

Waves3

Height (px)

Fill color

Fill side

SVG Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 150" width="100%" height="150" preserveAspectRatio="none"><path fill="#f97316" d="M0,110 C6.67,113.33 26.67,124.23 40,130 C53.33,135.77 66.67,141.31 80,144.64 C93.33,147.97 106.67,150 120,150 C133.33,150 146.67,147.97 160,144.64 C173.33,141.31 186.67,135.77 200,130 C213.33,124.23 226.67,116.67 240,110 C253.33,103.33 266.67,95.77 280,90 C293.33,84.23 306.67,78.69 320,75.36 C333.33,72.03 346.67,70 360,70 C373.33,70 386.67,72.03 400,75.36 C413.33,78.69 426.67,84.23 440,90 C453.33,95.77 466.67,103.33 480,110 C493.33,116.67 506.67,124.23 520,130 C533.33,135.77 546.67,141.31 560,144.64 C573.33,147.97 586.67,150 600,150 C613.33,150 626.67,147.97 640,144.64 C653.33,141.31 666.67,135.77 680,130 C693.33,124.23 706.67,116.67 720,110 C733.33,103.33 746.67,95.77 760,90 C773.33,84.23 786.67,78.69 800,75.36 C813.33,72.03 826.67,70 840,70 C853.33,70 866.67,72.03 880,75.36 C893.33,78.69 906.67,84.23 920,90 C933.33,95.77 946.67,103.33 960,110 C973.33,116.67 986.67,124.23 1000,130 C1013.33,135.77 1026.67,141.31 1040,144.64 C1053.33,147.97 1066.67,150 1080,150 C1093.33,150 1106.67,147.97 1120,144.64 C1133.33,141.31 1146.67,135.77 1160,130 C1173.33,124.23 1186.67,116.67 1200,110 C1213.33,103.33 1226.67,95.77 1240,90 C1253.33,84.23 1266.67,78.69 1280,75.36 C1293.33,72.03 1306.67,70 1320,70 C1333.33,70 1346.67,72.03 1360,75.36 C1373.33,78.69 1386.67,84.23 1400,90 C1413.33,95.77 1433.33,106.67 1440,110 L1440,150 L0,150 Z"/></svg>

Path d

M0,110 C6.67,113.33 26.67,124.23 40,130 C53.33,135.77 66.67,141.31 80,144.64 C93.33,147.97 106.67,150 120,150 C133.33,150 146.67,147.97 160,144.64 C173.33,141.31 186.67,135.77 200,130 C213.33,124.23 226.67,116.67 240,110 C253.33,103.33 266.67,95.77 280,90 C293.33,84.23 306.67,78.69 320,75.36 C333.33,72.03 346.67,70 360,70 C373.33,70 386.67,72.03 400,75.36 C413.33,78.69 426.67,84.23 440,90 C453.33,95.77 466.67,103.33 480,110 C493.33,116.67 506.67,124.23 520,130 C533.33,135.77 546.67,141.31 560,144.64 C573.33,147.97 586.67,150 600,150 C613.33,150 626.67,147.97 640,144.64 C653.33,141.31 666.67,135.77 680,130 C693.33,124.23 706.67,116.67 720,110 C733.33,103.33 746.67,95.77 760,90 C773.33,84.23 786.67,78.69 800,75.36 C813.33,72.03 826.67,70 840,70 C853.33,70 866.67,72.03 880,75.36 C893.33,78.69 906.67,84.23 920,90 C933.33,95.77 946.67,103.33 960,110 C973.33,116.67 986.67,124.23 1000,130 C1013.33,135.77 1026.67,141.31 1040,144.64 C1053.33,147.97 1066.67,150 1080,150 C1093.33,150 1106.67,147.97 1120,144.64 C1133.33,141.31 1146.67,135.77 1160,130 C1173.33,124.23 1186.67,116.67 1200,110 C1213.33,103.33 1226.67,95.77 1240,90 C1253.33,84.23 1266.67,78.69 1280,75.36 C1293.33,72.03 1306.67,70 1320,70 C1333.33,70 1346.67,72.03 1360,75.36 C1373.33,78.69 1386.67,84.23 1400,90 C1413.33,95.77 1433.33,106.67 1440,110 L1440,150 L0,150 Z

CSS background

.wave {
  width: 100%;
  height: 150px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20150%22%20width%3D%22100%25%22%20height%3D%22150%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23f97316%22%20d%3D%22M0%2C110%20C6.67%2C113.33%2026.67%2C124.23%2040%2C130%20C53.33%2C135.77%2066.67%2C141.31%2080%2C144.64%20C93.33%2C147.97%20106.67%2C150%20120%2C150%20C133.33%2C150%20146.67%2C147.97%20160%2C144.64%20C173.33%2C141.31%20186.67%2C135.77%20200%2C130%20C213.33%2C124.23%20226.67%2C116.67%20240%2C110%20C253.33%2C103.33%20266.67%2C95.77%20280%2C90%20C293.33%2C84.23%20306.67%2C78.69%20320%2C75.36%20C333.33%2C72.03%20346.67%2C70%20360%2C70%20C373.33%2C70%20386.67%2C72.03%20400%2C75.36%20C413.33%2C78.69%20426.67%2C84.23%20440%2C90%20C453.33%2C95.77%20466.67%2C103.33%20480%2C110%20C493.33%2C116.67%20506.67%2C124.23%20520%2C130%20C533.33%2C135.77%20546.67%2C141.31%20560%2C144.64%20C573.33%2C147.97%20586.67%2C150%20600%2C150%20C613.33%2C150%20626.67%2C147.97%20640%2C144.64%20C653.33%2C141.31%20666.67%2C135.77%20680%2C130%20C693.33%2C124.23%20706.67%2C116.67%20720%2C110%20C733.33%2C103.33%20746.67%2C95.77%20760%2C90%20C773.33%2C84.23%20786.67%2C78.69%20800%2C75.36%20C813.33%2C72.03%20826.67%2C70%20840%2C70%20C853.33%2C70%20866.67%2C72.03%20880%2C75.36%20C893.33%2C78.69%20906.67%2C84.23%20920%2C90%20C933.33%2C95.77%20946.67%2C103.33%20960%2C110%20C973.33%2C116.67%20986.67%2C124.23%201000%2C130%20C1013.33%2C135.77%201026.67%2C141.31%201040%2C144.64%20C1053.33%2C147.97%201066.67%2C150%201080%2C150%20C1093.33%2C150%201106.67%2C147.97%201120%2C144.64%20C1133.33%2C141.31%201146.67%2C135.77%201160%2C130%20C1173.33%2C124.23%201186.67%2C116.67%201200%2C110%20C1213.33%2C103.33%201226.67%2C95.77%201240%2C90%20C1253.33%2C84.23%201266.67%2C78.69%201280%2C75.36%20C1293.33%2C72.03%201306.67%2C70%201320%2C70%20C1333.33%2C70%201346.67%2C72.03%201360%2C75.36%20C1373.33%2C78.69%201386.67%2C84.23%201400%2C90%20C1413.33%2C95.77%201433.33%2C106.67%201440%2C110%20L1440%2C150%20L0%2C150%20Z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

Why SVG waves?

A wave drawn in SVG is a single vector path — it scales to any viewport width without pixelation and weighs only a few hundred bytes, far less than an image. Because the output uses preserveAspectRatio="none", it stretches to fill any container edge to edge, making it ideal for full-width section dividers and hero footers.

Frequently Asked Questions

What is an SVG wave divider?+

A wave divider is a curved SVG shape placed between two page sections so the boundary is a smooth wave rather than a straight line. It is a single filled <path>, so it scales to any width, stays crisp on any screen, and adds almost nothing to page weight.

How do I place the wave between two sections?+

Copy the SVG and drop it at the bottom of the first section (or the top of the next). The output uses width="100%" with preserveAspectRatio="none", so it stretches edge to edge. Set the SVG fill to match the color of the section the wave should blend into.

What do amplitude and waves control?+

Amplitude is the wave height in pixels — larger values make deeper crests and troughs. Waves is how many full crests appear across the width — more waves means a busier, higher-frequency edge. Flip moves the solid fill to the top so the wave hangs down from above.

Is anything sent to a server?+

No. The wave path is computed in your browser from a sine function and smoothed into Bézier curves. Nothing is uploaded or stored.

Related Tools

SVG Blob Generator

Generate smooth, organic blob shapes for backgrounds and image masks — adjust points, randomness, size, and color, then copy the SVG, the path, or CSS.

→

SVG Pattern Generator

Generate seamless, tileable background patterns — dots, grids, lines, crosshatch, zigzag, and checkerboard — and copy as CSS or SVG.

→

SVG to CSS Background

Generate a complete CSS background-image rule from SVG markup — configure size, repeat, and position with live preview. Copy as a CSS class or inline style.

→

How to use

Adjust amplitude and waves to shape the curve — the preview updates instantly.
Pick a fill color and set the divider height.
Toggle Bottom / Top to move the solid fill.
Copy the SVG or the CSS background snippet.