SVG blob generator

Organic shapes that make designs move.

Generate a blob from a seed, style it with color, a gradient, a pattern or an image, and export clean SVG, PNG or code. Every shape keeps a URL that rebuilds it exactly.

Generate a blob Read the docs

Seed 1260 · 6 nodes

Complexity 6Nodes around the shapeRandomness 6Lower is more irregular

#1e8fe5

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100%"><path d="M425,340Q354,430,263.5,406.5Q173,383,130.5,316.5Q88,250,113.5,154Q139,58,251,56Q363,54,429.5,152Q496,250,425,340Z" fill="#1e8fe5"/></svg>

Start here

What do you want to make?

Six starting points, each one a working blob you can change. Open one and the generator loads with those settings.

Solid blob

One flat color and one path, the shape to reach for behind a headline or a card.

Gradient blob

Two color stops running top to bottom, for hero sections that need depth without an image.

Outlined blob

Stroke only, no fill, which sits over photographs and busy backgrounds without hiding them.

Patterned blob

Tiled marks in a single color, useful as texture behind a section or in a slide deck.

Complex blob

Fourteen nodes and a low Randomness value give a restless outline with plenty of movement.

Built for designers and developers.

Designers get a shape they can drop into Figma, Canva or a slide and keep editing: a vector path, not a traced bitmap, with the fill already set the way they picked it.

Developers get the same shape as markup they would have written by hand. One path element, a 500 by 500 viewBox, and export targets for CSS, React and Flutter that need no runtime library.

Read the docs See export formats

Use case

Four places a blob earns its keep.

Each example opens in the generator with its settings loaded, so you can change the color and take the export you need.

Landing hero

Depth behind the headline

A gradient blob behind the first screen adds a second plane without adding an image request.

App onboarding

A frame for the illustration

A solid blob turns a flat screenshot or spot illustration into a contained, deliberate panel.

Slide deck

Section dividers with a shape

A calm four-node blob at 2048 pixels covers a full slide and still looks sharp on a projector.

Social post

Texture that reads at thumbnail size

A patterned blob holds its shape when a feed shrinks the image to a few hundred pixels.

Works with

Take the shape where you work.

The SVG and PNG exports land in the tools most blobs end up in. Here is what to do in each one.

Design

Figma

Drag in the SVG or paste the markup; it arrives as an editable vector layer.

Design

Canva

Upload the SVG or PNG and it appears under Uploads as an element.

Presentations

PowerPoint

Insert the SVG, then convert it to a shape to use the built-in fill controls.

Presentations

Keynote

Insert the PNG at 1024 or 2048 pixels; Keynote does not read SVG.

Code

React

Copy the exported TSX component into a project and pass size and color props.

Code

Flutter

Copy the CustomPainter and paint or clip with it at any widget size.

Web

WordPress

Upload the file as media; SVG uploads need to be allowed by an administrator.

Web

Webflow

Upload the SVG or PNG as an asset, or paste the markup into an Embed element.

How it works

Four steps from slider to file.

The whole loop takes about ten seconds, and every step can be revisited without losing the shape.

01
Shape
Set Complexity between 3 and 20 nodes and Randomness between 2 and 9, then shuffle until a shape looks right.
02
Style
Fill it with a color, a two-stop gradient, a pattern or an image, or switch to outline only.
03
Export
Copy the markup, download SVG or PNG at 512, 1024 or 2048 pixels, or take the CSS, React or Flutter code.
04
Reuse
Save the blob or keep its URL. Opening that link rebuilds the same shape with the same settings.

Generators

Six generators, one shape language.

Each tool builds on the same seeded outline, and every setting travels in the URL, so a blob made in one opens in the next.

Blob generator

The full control set: node count, randomness, seed, and fills from solid color to a clipped image.

Animated blob generator

Morph one path between two and eight shapes, then export CSS keyframes, an SMIL animation or a GSAP tween.

Gradient blob generator

Two color stops and a direction in CSS degrees, with the blend written into every export.

CSS blob shape

Clip an element to the outline, with a path() rule as the fallback and a shape() block in percentages.

SVG wave generator

Horizontal wave dividers 1440 units wide, with controls for points, amplitude, layers and a flip.

Blob background generator

Two to six blobs blurred into a soft color field, at the aspect ratio the design needs.

Under the hood

Output you can read and edit.

No runtime library, no wrapper markup, no generated class names. What the generator shows you is what lands in your project.

One path, two commands. Every shape is a closed path built from M, Q and Z commands in a 0 0 500 500 viewBox, so any vector tool can open it.
The URL is the state. Nodes, randomness, seed, fill and the outline flag all travel in the query string, which makes a blob a link you can paste anywhere.
Predictable strokes. The outline draws at 7 units on the 500-unit grid, so scaling the path by a known factor scales the border with it.

See the markup in the docs

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100%">
  <path d="M415,349Q364,448,256,437Q148,426,111.5,338Q75,250,101.5,144.5Q128,39,228,76.5Q328,114,397,182Q466,250,415,349Z" fill="#1e8fe5"/>
</svg>

Seeds

Deterministic

Same inputs, same shape, every time

Output

Under 1 KB

One path element, no dependencies

Formats

SVG, PNG, CSS, React, Flutter, URL, markup

Questions

Answers before you start.

What is a blob shape?

A closed curve with an irregular, organic outline, somewhere between a circle and a splash. It is built by placing nodes around a circle at varying distances from the center and joining them with quadratic curves.

What do Complexity and Randomness do?

Complexity sets the number of nodes, from 3 to 20. Randomness, from 2 to 9, controls how far each node may move toward the center, so a lower value gives a more irregular shape and a higher one keeps it close to a circle.

How do I get the same blob again later?

Every blob has a URL that carries its seed and settings. Bookmark that link or save the blob, and opening it rebuilds the identical path. Nothing about the shape is stored on a server.

Can I use a blob in commercial work?

Yes. A shape you generate is yours to use in client work, products and presentations, and no attribution is expected. The geometry is generated from your inputs, not licensed from anyone.

How do I export a PNG?

Choose 512, 1024 or 2048 pixels in the export panel and the file downloads with a transparent background. Use 512 for small accents, 1024 for slides and cards, and 2048 for full-screen backgrounds.

Can I put a photo inside a blob?

Yes. Switch the fill to image mode and paste the address of an image, and it is clipped to the outline. Your browser loads that image directly from the address you enter.

Get started

Make your first blob in ten seconds.

Move two sliders, pick a color, take the file. Come back to the shape later through its link or the saved list.

Open the generator See saved blobs