# Blob Generator — Organic SVG Backgrounds With Full Control

> Design organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.

A blob is an organic rounded shape used as a background. This designs one on a real canvas — pick the aspect ratio you are working to, and the shape is sized from it rather than floating as a circle in the middle. Points are scattered around an ellipse and joined in one of four ways: smooth curves, looser waves, straight peaks or right-angled steps, which is what turns the same points into a soft cell, a crystal or a staircase. Add a gradient, stack layers for depth, switch to an outline, then export as SVG, PNG at up to 3×, or an eight-value CSS border-radius. Every shape has a seed, so the URL recreates it exactly.

**URL:** https://convertto.tech/t/blob-shape-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Interpolation:** Smooth, wave, peak and step — the same points, four shapes
- **Canvas:** Six aspect presets, or any size up to 4000 px
- **Export:** SVG, PNG at 1×, 2× and 3×, or CSS border-radius
- **Reproducible:** Seeded — the URL recreates the exact shape
- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## How to use

1. Pick the canvas ratio you are designing for.
2. Set complexity and contrast, then try each interpolation style.
3. Choose a palette, or set the fill and background yourself.
4. Randomise until you like one — the seed keeps it — then export.

## FAQ

### Should I use the SVG or the CSS version?

CSS when you just need a soft shape behind something — it needs no extra element and animates smoothly between values. SVG when the outline itself matters: an eight-value border-radius can only describe the rounded-rectangle family, so it cannot reproduce a genuinely irregular blob, a peak or a step shape at all.

### Why does the same seed always give the same blob?

The randomness comes from a seeded generator rather than Math.random, so the shape is a pure function of its settings. That means the URL of this page recreates your exact shape for anyone you send it to, and randomising only changes the seed — so every shape you pass through is reachable again by typing its number.

### What do the interpolation styles actually change?

Only how the points are joined, never where they are. Smooth runs a Catmull-Rom spline through them; wave uses the same spline with looser tension so it bulges between points; peak joins them with straight lines; step uses right angles. The same seed and complexity under all four gives you four related shapes rather than four unrelated ones.

### How do I use one as a page background?

Export the SVG at the aspect ratio you need and set it as a background-image with background-size: cover. Because it is vector, one file covers every screen size without a second export — and at a few hundred bytes it costs less than any raster alternative.

### What are layers for?

Each extra layer draws a smaller, fainter copy of the shape behind the main one, with its own variation. It reads as depth rather than as separate shapes, and it is the quickest way to make a flat background feel composed.

## Related tools

- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Clip Path Generator](https://convertto.tech/t/css-clip-path-generator): Cut an element to a polygon, circle, ellipse or inset, and copy the clip-path.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Shape Generator](https://convertto.tech/t/css-shape-generator): Generate triangles, arrows, stars and other shapes using pure CSS.
- [Glassmorphism CSS Generator](https://convertto.tech/t/glassmorphism-generator): Create frosted-glass CSS with backdrop blur, transparency and a subtle border.
- [CSS Gradient Generator](https://convertto.tech/t/gradient-generator): Build linear, radial and conic CSS gradients and copy the code.
- [Type Scale Generator](https://convertto.tech/t/type-scale-generator): Build a modular typographic scale and copy it as CSS custom properties.
- [Neumorphism Generator](https://convertto.tech/t/neumorphism-generator): Generate the paired light and dark shadows that make an element look pressed into or raised from its background.
- [Room Design Visualizer](https://convertto.tech/t/room-design-visualizer): Click any wall, floor or piece of furniture in your own photo, then repaint it, remove it, or swap in a different product — all in your browser.