SVG Wave & Blob Generator

SVG Wave & Blob Generator makes the curvy shapes that web designers use to break up a page: waves between two sections, layered hills at the bottom of a hero, jagged peaks or square steps, and soft blobs behind a heading or a photo. Every shape is drawn as SVG, a vector format that stays perfectly sharp at any screen size and usually weighs well under one kilobyte.

Each design comes from a seed number. Move the complexity, amplitude and layer sliders and the shape changes in a predictable way; press New shape for a fresh random design, or type a seed you noted earlier to bring an old one back exactly. Waves can be stacked in up to five fading layers, flipped, or turned to hang from the top of a section, and any shape can be filled with a solid colour or a gradient.

The preview puts your design on a mock web page, with the wave joining two sections in your chosen colours, so you can judge it in context before you paste a line of code. When it looks right, copy clean SVG, copy it as a ready-made CSS background, or download an SVG or PNG file. All of it happens on your device.

1. Choose “Waves”, “Peaks and steps” or “Blob” at the top.
2. Use the Shape sliders: Height, Complexity, Amplitude and Layers for waves, or Edges and Growth for a blob. Pick Bottom or Top of a section and tick Flip if you like.
3. Choose a Solid or Gradient fill, set the colours, and set the page colour so the preview matches your site.
4. Press “New shape” until you like what you see, or type a seed to recreate an earlier design.
5. Press “Copy SVG”, “Copy CSS background”, “Download .svg” or “Download PNG”.

• Smooth waves drawn as Catmull-Rom curves through random points, plus sharp peaks and square steps.
• Up to five layered waves with an adjustable fade between layers.
• Organic blobs with 3 to 20 edges and a growth control for how wobbly they are.
• Seeded randomness: the seed is shown and editable, so the same settings always rebuild the same shape.
• Bottom or top position, left-to-right flip, and an optional stretch-to-fit setting.
• Solid or gradient fill in three directions, with any colours.
• Preview on a mock page or on its own over a transparency grid, with a live file size.
• Exports as compact SVG code, a URL-encoded CSS background, an .svg file, or a PNG at 1×, 2× or 3×.

• For a seamless divider, make the wave the same colour as the next section. The preview shows the join, so any mismatch is easy to spot.
• Lower complexity gives calm, wide swells; higher complexity gives choppy water. Between 4 and 8 suits most sites.
• Tick Stretch to any height if you want to set the wave’s height in CSS while it fills the full width; leave it off to keep the curve’s proportions.
• Use the CSS background when the wave is pure decoration. Paste the SVG into your HTML when you want to recolour it with CSS or animate it.
• Blobs look good slightly cut off at the edge of a section, with overflow hidden on the parent.