SVG Wave Generator — Section Dividers

Generate SVG wave dividers for website sections. Customize shape, colors, and layers.

Layers: 3

Amplitude: 40px

Color

Wave Style

Position

Flip Vertically

Preview

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200" preserveAspectRatio="none">
  <path d="M0,200 L0,80 C180,120 270,100 360,80 C540,40 630,60 720,80 C900,120 990,100 1080,80 C1260,40 1350,60 1440,80 L1440,200 Z" fill="#4f6df5" opacity="0.33" />
  <path d="M0,200 L0,90 C144,126 216,108 288,90 C432,54 504,72 576,90 C720,126 792,108 864,90 C1008,54 1080,72 1152,90 C1296,126 1368,108 1440,90 L1440,200 Z" fill="#4f6df5" opacity="0.67" />
  <path d="M0,200 L0,100 C120,132 180,116 240,100 C360,68 420,84 480,100 C600,132 660,116 720,100 C840,68 900,84 960,100 C1080,132 1140,116 1200,100 C1320,68 1380,84 1440,100 L1440,200 Z" fill="#4f6df5" opacity="1.00" />
</svg>

CSS Code

.wave-divider {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.wave-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

Help Us Improve

Be the first to rate!

Frequently Asked Questions

How do I use SVG Wave Generator?

Choose the wave style (smooth, sharp, layered), adjust height, colors, and position, then download the SVG or copy the code.

Is SVG Wave Generator free?

Yes, SVG Wave Generator on ToolPix is 100% free with no signup or installation required.

Is my data safe?

All processing happens in your browser, your data never leaves your device.

How do I use the wave as a section divider?

Download the SVG and place it between sections in your HTML, or use it as a background-image at the bottom/top of a section.

Can I generate animated waves?

Yes — enable the animated option to get a CSS-animated wave that moves smoothly, perfect for hero sections.

Related Tools

SVG Background Generator

Generate beautiful SVG background patterns. Waves, blob…

CSS Gradient Generator

Create beautiful CSS gradients visually. Linear, radial…

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. Multiple s…

Border Radius Generator

Create complex CSS border radius shapes. Individual cor…

CSS Animation Generator

Create CSS keyframe animations visually. Set timing, ea…