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 browser toolRuns 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

Create an organic shape

Input: 500 px size and medium complexity

Output: SVG path and clip-path code for a generated blob

Regenerate to change the control points while keeping the selected size.

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.

Open a related tool to prepare your files or refine the finished result.