Blob behind a card
Free, no sign-up, runs in your browser.
A blob sitting behind a card or a block of text, as colour rather than as a shape anyone is meant to look at directly. The most forgiving use for a blob and the one where a near-circular preset works best.
The recipe
| Shape | Soft blob |
|---|---|
| Export as | CSS background |
| Size | 491 B |
Step by step
- Pick Soft blob — low randomness stays quiet behind content.
- Choose a colour close to your page background, a shade or two away.
- Export as CSS background and apply it to the card's own container.
- Use `background-position` to push it off-centre — a centred blob looks like a mistake.
What you will be copying
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 33.65C118.88 33.14,151.1 49.98,159.29 65.77C167.49 81.56,159.05 113.2,149.17 128.39C139.29 143.58,116.48 156.87,100 156.92C83.52 156.98,59.27 143.39,50.27 128.71C41.27 114.03,37.71 84.67,46 68.82C54.29 52.98,81.12 34.16,100 33.65Z' fill='%234f46e5'/%3E%3C/svg%3E");
background-repeat…In more detail
Keep the contrast low. A decorative background that competes with the text in front of it fails twice: it is distracting, and it drags the text's contrast ratio down with it. If you cannot read the card comfortably with the blob behind it, the blob is too dark rather than the text too light.
Questions
Which shape should I start from for Blob behind a card?
Soft blob, exported as CSS background. That pairing is the one this page is built around, and the preview above is that exact shape — but it is a starting point, not a rule. Every slider stays live once you open it.
How much does it add to the page?
About 491 bytes for this combination. That is smaller than a single icon and it needs no network request at all, because the shape is markup rather than an image file.
Will it work on mobile?
Yes. A wave divider is set to stretch to its container rather than keep its aspect ratio, which is what lets one shape span any screen width without letterboxing. Blobs keep their proportions, since a stretched blob is just an ellipse.
Every figure and every shape on this page was produced by running the generator at build time, so it describes the tool you are about to use rather than a version of it that once existed.