Blob Gradient Generator

A blob gradient is a composition of organic, rounded shapes (blobs) filled with smooth multi-colour gradients, often arranged so neighbouring blobs visually merge into one another. The aesthetic became ubiquitous on consumer-product marketing in 2019 to 2021 (Notion, Headspace, Stripe Atlas) because it suggests warmth and friendliness without committing to literal illustration. Blob gradients have since become a quiet staple of SaaS onboarding, app docs, and brand identity for consumer-facing products.

What makes a shape a blob, technically, is its boundary curvature. Where geometric shapes have sharp corners or fixed radii, blob shapes have organic, hand-drawn curves with no two corners alike. The studio generates these shapes procedurally so every export is unique.

The studios blob renderer uses a 2D metaball algorithm. Imagine each blob as an invisible circle with a soft falloff in field strength. When two circles get close, their fields add together; the visible blob boundary is wherever the combined field strength crosses a threshold. The result: blobs that look like distinct shapes when they are far apart but smoothly fuse into one continuous shape when they touch.

This is the same math used in 3D rendering for things like fluid simulations and lava lamps. In 2D, it produces the organic, rounded boundaries that give blob gradients their characteristic look. You can turn metaballs off in the editor if you want overlapping circles instead of merging blobs, but the metaball mode is what most users want.

1. Open the blob editor. Visit the free blob gradient generator. The canvas opens with 4 default blobs drifting smoothly.
2. Pick a blob count. Set how many blobs to render (1 to 12). More blobs means denser composition; fewer means cleaner.
3. Choose colours. Add 2 to 6 colours to the palette. Each blob picks randomly from your palette so the composition stays cohesive.
4. Adjust motion and export. Tune drift speed if you want animation. Export as SVG, PNG, CSS, or MP4 video.

The studios SVG export produces clean, self-contained SVG with the blob shapes drawn as path elements. Two examples of what the output looks like:

Single soft blob, SVG path

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blob-1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff7e5f" />
      <stop offset="100%" stop-color="#feb47b" />
    </linearGradient>
  </defs>
  <path
    fill="url(#blob-1)"
    d="M44,166 C20,140 16,90 38,52 C60,14 110,8 144,28 C178,48 186,98 168,138 C150,178 100,194 76,184 C52,174 50,170 44,166 Z"
  />
</svg>

Two merging blobs, SVG composite

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="b1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#6366f1" />
      <stop offset="100%" stop-color="#ec4899" />
    </linearGradient>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" />
    </filter>
  </defs>
  <g filter="url(#goo)">
    <circle cx="140" cy="100" r="70" fill="url(#b1)" />
    <circle cx="240" cy="100" r="60" fill="url(#b1)" />
  </g>
</svg>

The second example uses the classic SVG "goo filter" trick, a Gaussian blur plus colour matrix that produces the metaball-merging effect entirely in SVG without any JavaScript. Useful for static decorative elements.

For decorative blobs where you want zero asset weight, you can fake a single blob shape in pure CSS using border-radius with 8 values:

.blob {
  width: 300px;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  filter: blur(0.5px);
}

The 8 values in border-radius are: top-left horizontal, top-right horizontal, bottom-right horizontal, bottom-left horizontal, top-left vertical, top-right vertical, bottom-right vertical, bottom-left vertical. Vary them to produce different blob shapes. Note: this is a single shape only; for the metaball merging effect you need SVG or canvas.

The studio includes a built-in animation engine that drifts blob positions smoothly over time. For users who want to roll their own animation in CSS, the simplest approach is to animate border-radius and transform on a single blob:

.blob {
  width: 300px;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  animation: blob-drift 8s ease-in-out infinite;
}

@keyframes blob-drift {
  0%, 100% {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    border-radius: 37% 63% 46% 54% / 48% 55% 45% 52%;
    transform: translate(20px, -10px) rotate(8deg);
  }
}

For animation across multiple merging blobs, export an MP4 from the studio instead. Pure CSS cannot replicate the metaball-merging animation cheaply.

• App onboarding. Notion, Headspace, and Calm all use blob gradients on first-launch screens. The friendly, soft visual feels welcoming.
• Consumer SaaS landing pages. When you want to suggest playfulness without being childish.
• Brand identity for friendly consumer products. Blobs work especially well for wellness, education, and family-focused brands.
• Section dividers in long pages. A wide animated blob band breaks up text-heavy content without being intrusive.
• Mobile app splash screens. Single blob plus brand mark equals a friendly app launch experience.

1. Too many blobs. More than 6 to 8 blobs in a small area looks busy. Spread them out or reduce the count.
2. Pure black or pure white blobs. Real blob compositions use tinted colours, not pure tones. Mix a touch of warmth or coolness into your palette.
3. Overlapping with metaballs off. Two circles overlapping looks accidental. Either turn metaballs on (so they merge) or space them apart.
4. Saturated colours throughout. A blob gradient with five saturated colours looks like a kindergarten poster. Use one accent against muted neighbours.
5. Forgetting the text overlay. Build the blob composition, then test your headline on top of it at the brightest and darkest points. Adjust if contrast fails.