How do I use the blob?

Paste the SVG into your HTML for a coloured shape, or use the clip-path on an element to clip an image or div to the blob outline.

Are the shapes always different?

Yes. Each regenerate randomises the outline, so you get a fresh organic shape every time.

Can I animate a blob?

Yes. Blobs are often animated by transitioning between two path shapes; this tool gives you a static starting shape to build from.

CSS & Design

SVG Blob Generator

Generate random organic blob shapes as SVG and copy the code.

Free foreverRuns in your browserNo sign-up

Complexity6

Fill colour

Random organic blob shapes for backgrounds and section dividers. Copy the SVG or use it as a CSS clip-path.

About the SVG Blob Generator

Organic blob shapes are popular for backgrounds, hero sections and dividers because they feel softer than rectangles.

This generator creates random smooth blobs as SVG, with sliders for complexity and colour and a regenerate button, then lets you copy the SVG or use it as a CSS clip-path.

It runs in your browser.

Key features

Random smooth blob shapes
Complexity and colour controls
Regenerate for new shapes
Copy SVG or clip-path

How to use

1Adjust the complexity and colour.
2Regenerate until you like the shape.
3Copy the SVG or clip-path.

Examples

Background blob

Generates a smooth organic SVG shape you can drop behind a hero section.

Frequently asked questions

How do I use the blob?: Paste the SVG into your HTML for a coloured shape, or use the clip-path on an element to clip an image or div to the blob outline.
Are the shapes always different?: Yes. Each regenerate randomises the outline, so you get a fresh organic shape every time.
Can I animate a blob?: Yes. Blobs are often animated by transitioning between two path shapes; this tool gives you a static starting shape to build from.