ShapeBlob
Seed4821
Inline cost638 B
VerdictInline it
Organic blob shapes, repeating motifs, layered waves, and film grain — the decorative vector work a page needs behind a hero or a card. Every shape is drawn from a seed you can see and edit, which is the part the other generators leave out: reload one of those and the shape you liked is gone, while here the number in the address bar redraws it exactly.
Step by step
01Pick the kind of shape
A blob for an organic mass behind a hero or an avatar. A pattern for a repeating texture that tiles across any size. Waves for layered bands, which read as depth on a section divider.
02Roll until something lands
The seed drives every random decision in the shape. Roll it, and when one is right, keep the number — it is the only thing you need to get that shape back.
03Shape it deliberately
Points control how many times the outline turns; contrast controls how far each turn strays from a circle. Low contrast with many points gives a soft pebble, high contrast with few gives a splash.
04Take the CSS, not the file
The generated CSS carries the whole shape as a percent-encoded data URI, so it drops into a stylesheet with no asset to deploy alongside it. The footer says when the shape has grown big enough to be worth a file instead.
Worked example
The same seed at four contrast values, with points held at six. Contrast is the percentage by which each control point may stray from the mean radius.
Given
Contrast against the character of the shape
0% a clean ellipse — the seed has nothing to vary
15% a pebble; reads as deliberate, not generated
30% the default; clearly organic, still calm
60% a splash; lively, and it fights foreground textContrast is the difference between a shape that supports a layout and one that competes with it. Anything sitting behind text wants to stay under about 20%, because a busy outline creates local contrast changes that make the type above it harder to read. Save the high values for shapes that are the subject rather than the backdrop.
Before you paste it into a stylesheet
A seed is what makes a generated shape usable
Most blob and background generators produce a new random shape on every reload, so the one you liked cannot be recovered and a colleague opening the same tool sees something else. A visible seed turns a lucky roll into an asset you can version, share, and regenerate.
Percent-encode SVG rather than base64
Base64 inflates a payload by roughly a third and turns text into an opaque blob. An SVG is already text, so percent-encoding keeps it near its original size and lets it compress again over the wire. Reach for base64 only where something refuses the alternative.
Inlining saves a request, and costs it on every load
A data URI in a stylesheet has no separate fetch, but it also cannot be cached apart from that stylesheet — change one rule and the whole shape is re-sent. Under a few kilobytes the saved request wins; well above it, an external file that caches once wins.
The background colour belongs in the SVG
A shape exported with a transparent ground picks up whatever sits behind it, which is rarely what the preview showed. The fill here is written into the file, so the exported asset looks the same wherever it lands.
Patterns tile, blobs do not
A pattern is a motif repeated on a grid, so it covers any area at any size without distorting. A blob is a single closed shape sized to its canvas — stretch it across a wider container and it stretches with it, which is why the two take different repeat rules in the generated CSS.
Grain is a filter, and filters cost pixels
The grain layer is feTurbulence, generated at render time rather than stored. It stays tiny in the file but is the most expensive part to paint, so use it on a hero or a card rather than on something repeated hundreds of times down a page.
The judgement call
The three kinds solve different problems, and the delivery depends on where it lands.
A soft mass behind a hero headline
Blob · low contrast
Organic enough to feel designed, calm enough that the type above it stays readable.
Texture across a whole page background
Pattern
It tiles, so it covers any viewport at any size without stretching or repeating visibly.
A divider between two sections
Waves
The layered bands read as depth, and the shape is anchored to the bottom edge where a divider needs it.
A decorative shape under 4 KB
Inline the CSS
No request, nothing to deploy, and nothing that can 404 after a cache purge.
A large detailed shape on many pages
An SVG file
Past a few kilobytes an external file cached once beats the same bytes re-sent with every stylesheet change.
A shape you will hand to a designer
Download the SVG
It opens in Figma or Illustrator as editable vector. A data URI in a stylesheet does not.
Reference
FAQ
Keep the seed. The Tinapps SVG background generator draws every shape from a seeded random number generator, so entering the same seed with the same points and contrast reproduces the shape exactly — and the Share button puts all of it in the URL. This is the difference from generators that reroll on refresh, where a shape you liked cannot be recovered.
Inline it as a data URI while it is under about four kilobytes, which covers nearly every blob and pattern. Inlining removes an HTTP request and there is no asset to deploy, but the bytes are re-sent whenever the stylesheet changes, so a large or detailed shape used across many pages is better as an external file that caches on its own.
The usual cause is quoting: a percent-encoded SVG data URI contains characters that break an unquoted url(), so it must be wrapped in double quotes, and the SVG itself must then use single quotes internally. The CSS this tool generates is already escaped correctly — copy the whole rule rather than just the URI.
Yes. Download the SVG rather than copying the CSS and it opens in any vector editor as editable paths — the blob is a single closed path, waves are one path per layer, and a pattern is a tiled motif. The grain layer is an SVG filter, which some editors rasterise on import.
A blob is one closed organic shape sized to its canvas, so it stretches if the container does. A pattern is a small motif repeated on a grid, so it covers any area at any size without distorting. Use a blob as a focal shape behind content and a pattern as texture across a whole surface.
Yes. A shape generated by the Tinapps SVG background generator is produced from a seed and your own colour choices, with no stock asset involved, so there is no licence and nothing to attribute. Everything is generated in your browser and never uploaded.
Shapes are generated in your browser from a seed. Nothing is uploaded, and the tool keeps working with the network disconnected.
Keep going
Gradient generator
Build the two-colour ramp before bringing the hex values here.
Placeholder image
Fill the content slots that sit on top of the background.
Format converter
Re-encode the exported PNG for a destination that will not take SVG.
Palette generator
Derive a full scale from the colour you used in the shape.