SVG · Zero Dependencies · Copy or Download

SVG wave & blob generator

Generate smooth waves for section dividers or flowing blobs for backgrounds and UI elements. Tweak every parameter and copy production-ready SVG code in one click.

Amplitude 40

Frequency 2

Layers 2

Wave position 60%

Direction

Smooth

Height (px) 120

Fill color

#6c8bff

Layer 2 color

#5cd6c0

Background

#0f1222

SVG code

SVG shapes FAQ

How do I use an SVG wave as a section divider?

Copy the SVG code and paste it between two sections of your HTML. Set the SVG's fill to match the background colour of the section below it, then position it at the bottom of the section above. Add display: block to remove the small gap browsers add below SVGs.

Can I use the SVG as a CSS background image?

Yes. Encode the SVG as a data URI: wrap it in url("data:image/svg+xml,…") and URL-encode the characters. Tools like URL-encoder.org can do this automatically.

What is the viewBox width?

Waves use a 1440 × (height) viewBox. Blobs use a square viewBox matching the size you set. Set width: 100% on the SVG element to make it responsive.