Changelog

Updated September 18, 2026

Every change to the generator and its exports is listed here, most recent first.

1.2.0

18 September 2026

CSS blob shape

A CSS blob shape page that opens the generator with the code panel set to CSS.
The CSS export writes clip-path: path("…") as a fallback and, inside an @supports block, clip-path: shape(from X% Y%, curve to X% Y% with CX% CY%, …, close).
Because shape() takes percentages, the clip scales with the element; path() coordinates are pinned to pixels.

SVG wave generator

An SVG wave generator that draws a horizontal divider 1440 units wide, at a height of 160, 240, 320 or 480.
Points places 3 to 12 control positions across the width, Amplitude from 1 to 9 sets how far they travel, and Shuffle rerolls the seed.
Flip puts the curve at the bottom with the fill above it. Layers stacks 1 to 3 copies at decreasing opacity.
Fill is a solid color or a two-stop gradient with a direction.
Exports: an SVG file, SVG markup, a CSS background-image as a data URI, and PNG. Settings travel in the URL as pts, amp, se, h, fl, ly and c or g with ga.

Blob background generator

A blob background generator that scatters 2 to 6 blobs over a canvas at an aspect ratio of 16:9, 4:3, 3:2, 1:1 or 9:16.
Complexity and Randomness shape the outlines; Blur from 0 to 80 turns hard shapes into soft color fields.
A palette of 1 to 4 colors is assigned to the blobs in turn, over a canvas color behind them. Shuffle rerolls the arrangement.
Exports: an SVG file, SVG markup, a CSS background-image and PNG. Settings travel in the URL as as, n, se, e, gw, bl, p (colors separated by |) and bg.

Short links

Copy link gives a short address of the form https://blobs.app/b/<code>/ that reopens the same blob. Blobs with an image fill keep the full address.

Shapes gallery

The gallery grows from 40 presets to 120, still filterable by fill, each with its own page and downloads.

18 September 2026

Animated blobs

A blob can morph between 2 and 8 shapes in a loop. Every frame uses the node count of the first, so the path interpolates cleanly.
Frames sets the number of shapes, Duration covers the whole loop from 2 to 30 seconds, and Easing chooses between ease and linear.
The animated blob generator carries these controls; the settings travel in the URL as a, ad and ae.

Animation exports

CSS @keyframes that animate the path’s d property, with a prefers-reduced-motion query that stops the loop.
An SVG file with an SMIL <animate attributeName="d"> element, so the motion stays inside the file.
A GSAP snippet that tweens the d attribute through the frames.

Gradients

Gradients take a direction in CSS degrees: 180 runs top to bottom, 90 runs left to right. The angle travels in the URL as ga.
The gradient blob generator puts the two stops and the angle on one panel.

Shapes gallery

Forty presets with solid, gradient, outline and pattern fills, filterable by fill.
Each preset has its own page with SVG and PNG downloads at 512, 1024 and 2048 pixels, the code for the shape, and a link that opens it in the generator.

Blog

A blog with guides on animation methods, gradient color pairs, landing-page layout patterns, and how the generators compare.

18 September 2026

Generator

Blob shapes built from a seed, a Complexity control for the number of nodes, from 3 to 20, and a Randomness control from 2 to 9, where a lower value gives a more irregular shape.
Shuffle picks a new seed.
The same seed, Complexity and Randomness always produce the same shape.
Every blob has a URL that reproduces it, so a link can be shared or bookmarked.

Fills

Exports

Saved blobs

Save a blob to the browser on the device you are using and find it again on the saved page.

Documentation