Free SVG Wave & Blob Generator: Section Dividers

Make a wave divider or an organic blob shape, then copy the SVG code or download the file. Everything runs in your browser.

  • 100% free
  • Waves & blobs
  • Layers & gradients
  • SVG or CSS
1
Pick a styleWave divider or blob.
Wave style
ColorsWave color and section background.
2
Shape itUse the sliders.
3
Preview & copySVG, CSS or file.

☕ Support ProFigma

Did this tool save you time? Buy me a coffee.

Hi, I'm Mahesh 👋 I build every ProFigma tool myself and keep them free for designers and developers. If one helped you today, a small coffee keeps new tools and features coming.

  • Keeps every tool free
  • Funds new tools & features
  • Supports an indie creator
Buy Me a CoffeeSecure checkout via Gumroad · Any amount
How it works

Make an SVG wave or blob in three steps

  1. Choose wave or blobPick a wave style for a section divider, or a blob for a background shape.
  2. Shape itChange the height, number of waves, layers, points and colors. Press Randomize for new ideas.
  3. Copy or downloadCopy the SVG code, copy it as a CSS background, or download the .svg file.
Why this one

Shapes for your sections, without a design tool

Waves and blobs in one tool

Section dividers and organic shapes with the same simple controls.

Clean, light SVG

A single scalable path per layer. No extra markup.

Random with a click

Press Randomize until you find a shape you like.

Many ways to use it

Copy SVG, copy a CSS background, or download the file.

Tips

Tips for better results

  • Match the colors. Make the wave color equal to the background of the next section so the join is invisible.
  • Keep waves gentle. Low height and 1 or 2 waves feel calm and professional.
  • Layer for depth. Two or three layers with decreasing opacity add depth with little weight.
  • Use a gradient for blobs. A two-color gradient makes a flat blob look rich and modern.
FAQ

SVG wave and blob questions

How do I make an SVG wave divider?

Choose a wave style, set the height and colors, then copy the SVG. Place it at the bottom of a section with the same background color as the next section, and the page flows into it with a wavy edge.

How do I use the SVG in my website?

Paste the SVG code straight into your HTML, save it as a .svg file and use it in an img tag, or use the CSS tab to set it as a background-image.

Can I use more than one wave layer?

Yes. Use the layers slider for up to four waves. Each layer is a little more transparent, which makes a soft, layered effect.

What is a blob shape used for?

Blobs are organic shapes used behind images, as decoration in hero sections, or as avatar and card backgrounds. Randomize until you like one.

Will the wave stretch on wide screens?

Yes. The wave is a scalable vector. The code uses preserveAspectRatio="none", so it stretches to the full width of its container without losing sharpness.

Can I change the color later?

Yes. Change the fill value in the SVG, or set the fill with CSS if you paste the SVG inline.

How do I put the wave at the top of a section?

Turn on Flip, which mirrors the shape vertically so the wave sits at the top of the container.

Is anything uploaded?

No. The shapes are made in your browser.

Read the guideHow to Add an SVG Wave Divider Between SectionsMake it responsive, match the colors and add depth with layers.Read more →

QR Code Generator

Custom QR codes for links, Wi-Fi, contacts and WhatsApp, with your logo and colours.

Case Converter

Switch text between 15+ cases in one click.

Image Compressor

Shrink photos up to 90% right in your browser.

Contrast Checker

WCAG 2.2 AA and AAA checks for any colour pair.

UI Grid Maker

Design Figma and CSS grids with a live calculator.

PNG to JPG Converter

Bulk convert images in three steps.