Metaball Gradient Generator

A metaball is a graphics primitive that looks like a fluid sphere with a soft boundary. Place two metaballs near each other and their boundaries do not just overlap; they smoothly fuse into a single continuous surface, like two drops of mercury merging. This fluid-merging behaviour is what gives metaballs their name (the "meta" in metaball refers to higher-dimensional or generalised geometry, coined when the technique was first developed).

Visually, metaballs read as fluid, organic, and slightly scientific. They show up in 3D rendering for water and slime simulations, in scientific visualisation for electron density and molecular surfaces, and in 2D design for lava-lamp-style backgrounds. The 2D version is what the studios metaball generator produces: many metaballs drifting on a coloured background, fusing as they approach each other.

The studio renders up to 24 metaballs at once in real time using WebGL. Each metaball has a position, a radius, and an influence falloff. Colours can be assigned per-ball, per-region, or sampled from a global palette. The result is procedural, never repeats exactly, and exports at any resolution because the geometry is computed at render time.

Metaballs are an example of implicit surface rendering. Instead of defining a shape by its boundary directly (like specifying the vertices of a polygon), you define a scalar field across the entire plane and then render the contour where the field crosses a threshold value (the isosurface).

For metaballs, the scalar field at any point is the sum of contributions from each metaball, where each contribution decays smoothly with distance:

field(x, y) =
  sum over each metaball b of:
    radius(b)^2 / (distance(x, y, position(b))^2 + epsilon)

if field(x, y) > threshold:
  pixel is inside a metaball, render its colour
else:
  pixel is background

When two metaballs are far apart, the field around each one is dominated by its own contribution, and the visible boundary is a circle around each ball. When two metaballs get close, their contributions add together in the gap, lifting the field above the threshold across the region between them, and the boundary visually fuses. This is the merging effect.

The studios implementation runs the field calculation per pixel on the GPU at 60fps. For 24 metaballs across a 1080p canvas, that is around 50 million field evaluations per second. WebGL handles this comfortably on any device made in the last decade.

1. Open the metaball editor. Visit the free metaball gradient generator. The canvas opens with 6 metaballs drifting smoothly across a coloured background.
2. Set ball count. Pick 2 to 24 metaballs. 4 to 8 is the sweet spot. More balls mean more complex blending boundaries but also more GPU cost.
3. Tune motion and palette. Adjust ball size variance, motion speed, and pick 2 to 6 colours for the palette. Cool tones read as scientific; warm tones read as biological.
4. Export. Pause and export PNG up to 8K, or capture the animation as MP4 or WebM on Pro plans for use in product reels and music videos.

For static decorative metaball-style elements where you do not need real-time animation, there is a clever SVG technique called the "goo filter" that produces the metaball-merging effect using a Gaussian blur and a colour matrix:

<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)" />
    <circle cx="320" cy="120" r="40" fill="url(#b1)" />
  </g>
</svg>

The trick: the Gaussian blur softens the boundaries of the circles, and the colour matrix sharpens them back to crisp edges, but the merging behaviour from the blur stays intact. The result looks like genuine metaballs even though the underlying shapes are just regular SVG circles.

Limitations: the SVG version cannot animate cheaply (re-running the blur every frame is expensive in browsers), the colour matrix is fragile across browsers, and complex compositions with many balls slow down. For static decorative elements, this technique is great. For real animated metaball backgrounds, use the studios WebGL renderer.

Blob and metaball gradients use the same underlying algorithm but tune for different aesthetics. The choice between them comes down to brand personality.

Blob gradients are tuned for marketing-friendly consumer brands. The palette defaults to pastels and muted colours, the motion is slower, and the merging is more pronounced (blobs spend more time fused into single continuous shapes). The visual feel is friendly, organic, slightly illustrative.

Metaball gradients are tuned for scientific or technical aesthetics. The palette skews more saturated, the motion is faster, and the merging is sharper (metaballs spend more time as distinct visible spheres with crisp curvature at the fuse points). The visual feel is cellular, fluid, slightly clinical.

Pick blob for: app onboarding, friendly consumer marketing, wellness brands, kids products. Pick metaball for: NFT collections, scientific visualisation aesthetics, music streaming backplates for electronic genres, generative art.

• App onboarding flows. Especially for utility apps where the visual should feel modern but not overly playful.
• Lava-lamp aesthetic UI. Music players, mood lighting apps, ambient experiences where calm motion matters.
• Music streaming backplates. Spotify Canvas and Apple Music animated artwork for electronic and ambient genres.
• Liquid loading screens. Replaces traditional spinner loaders with something more visually engaging.
• NFT collection art. Procedural variation means every generated piece is unique without manual artwork.
• Scientific visualisation aesthetics. Brand identity for biotech, pharma, and research-focused products.
• Game UI backplates. Especially puzzle games, casual games, and any game with a fluid-mechanic theme.
• Crypto and DeFi marketing. Fluid metaballs suggest movement and continuous flow, which matches the messaging around liquidity and continuous markets.

Metaballs were invented in 1982 by Jim Blinn at the New York Institute of Technology. Blinn was working on scientific visualisation of molecular structures and needed a way to render electron density fields, which have no defined surfaces but blend smoothly. His solution: sum scalar field contributions from each atomic centre, then render the isosurface at a chosen threshold.

The technique sat in scientific visualisation for years before crossing over into entertainment computer graphics. By the 1990s, metaballs appeared in 3D animation software for water and slime effects. The classic example: the liquid metal T-1000 in Terminator 2 used metaball-style surface rendering for its shape-shifting effects.

In the 2010s, the technique came to web and app design as browsers gained GPU capability and HTML5 canvas became practical. By the early 2020s, metaball backgrounds were everywhere: Instagram filters (the bubble effect), Snapchat lenses, TikTok visual effects, lava-lamp app loading screens. The Gradients.design metaball mode is the modern designer-friendly interface to a four-decade-old technique.

1. Too many metaballs. Above 12 to 15 balls, the canvas is constantly merged into one continuous blob and the metaball-merging effect stops being visible. Stay between 4 and 10 for compositions where the technique should matter.
2. All metaballs the same size. Uniform-size balls read as artificial. Add size variance (around 40 to 60 percent) for a more natural feel.
3. Motion too fast. Fast metaball motion reads as agitated and chaotic. The technique works best with slow, contemplative drift.
4. Pure-black background. Pure #000 background makes the metaballs feel disconnected from their environment. Use deep navy or near-black with a slight tint.
5. Pure-white metaballs. Real fluids tint slightly under environmental light. Pure white reads as a Photoshop primitive rather than as a designed visual.
6. No prefers-reduced-motion handling. If embedding a metaball React component on a website, wrap in the media query. Show a static fallback for users who opt out of motion.