Free tool · beUI Studio · Organic

Animated Metaballs Background

Blobs that merge and split like liquid in a lava lamp. Metaballs feel playful and organic, adding personality to a page.

Design it in your browser, tune the colors and motion, and export it as React source, a PNG, or a WebM video.

Static preview. Open it in Studio to see it move and edit it live.

Where it works

  • Consumer apps and playful brands
  • Creative agency and portfolio sites
  • Empty states and illustrations

Tip: Slow the motion down for a calm lava-lamp feel, or speed it up for an energetic look.

Make it yours

Pick your own palette, then adjust the shader and finish. Stack effects on top for a retro, glitch, or print look.

Settings

  • Speed
  • Scale
  • Detail
  • Distortion
  • Glow
  • Grain
  • Vignette
  • Brightness
  • Contrast
  • Saturation
  • Hue

Effects

  • Pixelate
  • Dither
  • Posterize
  • Edge glow
  • Pixel sort
  • LED
  • RGB split
  • Glitch
  • Scanlines
  • Grain
  • Duotone

Export options

React source

A standalone React component with your shader, colors, and motion settings, ready to paste into a Next.js or Vite app.

PNG image

A still frame at the size you choose, for social images, email headers, slides, or a lightweight fallback.

WebM video

A looping video for places that can't run WebGL, such as social posts, presentations, and some site builders.

Frequently asked questions

Is the metaballs background generator free?
Yes. beUI Studio is free to use in your browser, including exporting React source, PNG images, and WebM videos.
How do I add an animated metaballs background to a React app?
Open the background in Studio, adjust it, then export React source. Paste the component into your project and render it behind your content, for example as the first child of a hero section.
Will an animated WebGL background slow down my site?
It uses the GPU, so keep it to one background per view, avoid full-resolution canvases on low-power devices, and use the PNG export as a fallback for visitors who prefer reduced motion.
Can I change the colors to match my brand?
Yes. Every background takes your own palette, and you can tune speed, scale, detail, distortion, glow, grain, and color adjustments before exporting.

More organic backgrounds