A lava lamp background in React

Blurred circles plus an SVG goo filter give the lava lamp look in plain CSS. One React component, no packages, it works as a Server Component and it stops moving for Reduce Motion.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Lava lamp component

components/lava-lamp.tsx

import "./lava-lamp.css";

const BLOBS = [
  { size: 38, left: 4, duration: 18, delay: -2 },
  { size: 26, left: 52, duration: 22, delay: -9 },
  { size: 32, left: 30, duration: 16, delay: -5 },
  { size: 22, left: 70, duration: 25, delay: -14 },
  { size: 28, left: 16, duration: 20, delay: -11 },
];

// Blurred circles + an SVG "goo" filter: the blur makes close blobs overlap, the colour matrix
// turns the soft edge back into a hard one, so touching blobs melt into each other.
// No state, no effects: it works as a Server Component.
export function LavaLamp({
  colors = ["#ff5f6d", "#ffc371"],
  className = "",
  filterId = "lava-goo",
}: {
  colors?: [string, string];
  className?: string;
  filterId?: string;
}) {
  return (
    <div aria-hidden className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`}>
      <svg width="0" height="0" className="absolute">
        <filter id={filterId}>
          <feGaussianBlur in="SourceGraphic" stdDeviation="14" result="blur" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -9" />
        </filter>
      </svg>
      {/* container-type: size lets the keyframes move blobs by the box's own height (cqh) */}
      <div className="absolute inset-0" style={{ filter: `url(#${filterId})`, containerType: "size" }}>
        {BLOBS.map((b, i) => (
          <span
            key={i}
            className="lava-blob absolute rounded-full"
            style={{
              width: `${b.size}vmin`,
              aspectRatio: "1",
              left: `${b.left}%`,
              background: colors[i % 2],
              animationDuration: `${b.duration}s`,
              animationDelay: `${b.delay}s`,
            }}
          />
        ))}
      </div>
    </div>
  );
}

components/lava-lamp.css

/* components/lava-lamp.css */
.lava-blob {
  bottom: 0;
  animation-name: lava-rise;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}

/* From just below the box to just above it, measured in the box's height (cqh). */
@keyframes lava-rise {
  0% { transform: translateY(100%) scale(1); }
  50% { transform: translateY(-50cqh) scale(1.15, 0.9); }
  100% { transform: translateY(-100cqh) scale(0.9, 1.1); }
}

/* Reduce Motion: no movement. The blobs stay parked halfway up, still merged. */
@media (prefers-reduced-motion: reduce) {
  .lava-blob { animation: none; transform: translateY(-40cqh); }
}

app/page.tsx (a hero with the lava lamp behind it)

import { LavaLamp } from "@/components/lava-lamp";

export default function Home() {
  return (
    <section className="relative isolate flex min-h-[80vh] items-center justify-center overflow-hidden bg-neutral-950 px-6">
      <LavaLamp colors={["#ff5f6d", "#ffc371"]} className="opacity-80" />
      <div className="relative text-center text-white">
        <h1 className="text-4xl font-semibold tracking-tight sm:text-6xl">Ship the weird idea</h1>
        <p className="mt-4 text-neutral-300">A lava lamp background in plain CSS and SVG.</p>
      </div>
    </section>
  );
}

Good to know

How the goo works: feGaussianBlur softens every blob so neighbours overlap in a haze, then feColorMatrix multiplies alpha by 22 and subtracts 9, which turns the haze back into a hard edge. Where two blurs overlap, the edge wraps both, so the blobs look like they melt together.
The filter has to sit on the wrapper around the blobs, not on each blob, or nothing merges. Keep the blobs in one colour family; the colour matrix leaves colour alone, so very different colours meet at a visible seam.
The blobs are sized in vmin so they scale with the smaller side of the screen, and they move in cqh, the wrapper's own height (it has container-type: size), so they cross the whole box on a phone and on a wide screen alike. cqh needs a browser with container query units; we ran it in Chromium only.
With Reduce Motion on, the animation stops and the blobs stay parked halfway up, still merged.
A blur filter over a full-screen layer is real GPU work on low-end phones. Fewer blobs, a smaller stdDeviation or a smaller box all cut it; we didn't measure frame rates.
It's a decoration: the root is aria-hidden and pointer-events-none, so it never takes clicks or screen-reader focus. Give each instance its own filterId if you render more than one on a page.

When you want liquid chrome, not lava: Liquid Metal Blob

CSS goo gives flat, soft blobs. If the background should look like metal, with reflections, a surface that reaches for the pointer and a blob that splits on click, that's shader territory.
Liquid Metal Blob is our paid piece for that. It's one drop of liquid chrome drawn by a raw WebGL 1 fragment shader, with no three.js and no packages. Small droplets orbit inside it, a third drop reaches toward the pointer and pulls a bridge out of the surface, and a click splits the blob in two, then merges it again. Chips switch the material between Chrome, Gold and Volt, or you pass your own tints.
The component draws a fixed 1000 x 660 stage, so the hero below centres it; on a phone you see the blob, not the edge of the stage. The text sits on top with pointer-events-none so the pointer still reaches the canvas.
Unlike the CSS version, it doesn't pause when scrolled out of view and the shader doesn't read Reduce Motion. If that matters for your page, render a still background instead when prefers-reduced-motion is set, as the AI orb guide does.
Its stylesheet only styles its own .qlm- classes, so it doesn't reach your theme.

Liquid Metal Blob: props and the Paper shader comparison

components/metal-hero.tsx (Liquid Metal Blob)

"use client";
import LiquidMetal from "@/components/LiquidMetal";

// The paid swap: a WebGL chrome blob instead of CSS goo. It fills the hero and follows the pointer.
export function MetalHero({ children }: { children: React.ReactNode }) {
  return (
    <section className="relative isolate h-[560px] overflow-hidden bg-black">
      {/* LiquidMetal draws a fixed 1000 x 660 stage; centre it so phones see the blob, not the stage's edge */}
      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
        <LiquidMetal showChips={false} label={null} maxDpr={1.5} />
      </div>
      <div className="pointer-events-none relative z-10 flex h-full items-end justify-center pb-16 text-center text-white">
        {children}
      </div>
    </section>
  );
}

What we checked

Google suggests 9 completions for "lava lamp css" (effect, animation, background, menu) and 5 for "gooey effect css", read October 26, 2026.
All four files type-check with TypeScript 5.9.3 strict and build with next build on Next.js 15.5.28, React 19.1.1 and Tailwind 4.3.3; metal-hero.tsx against the Liquid Metal Blob source. In headless Chromium at 390 and 1440 px: the lava lamp hero and the metal hero both rendered with 0 page errors and no sideways scroll, and with Reduce Motion emulated the blobs' animation was none.

Install

Copy from the zipPut react/src/components into src/, then no extra packages.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

tints: metal colours (Chrome, Gold, Volt by default)
defaultTint: which tint to start with
showChips: material picker
label: hint text, or null
maxDpr: quality vs GPU cost
onTintChange: picked tint
onSplitChange: the blob split or merged

How qodesign compares

qodesign vs React BitsReact Bits is best for: text animations, animated backgrounds and creative effects.
qodesign vs Aceternity UIAceternity UI is best for: teams building many marketing pages who want one big library.

All comparisons, with prices read on each library's own site.

From the blog: WebGL Shader Background in Next.js Without three.js

Questions

How do I make a lava lamp effect in CSS?

Blur a group of moving circles and raise the alpha contrast with an SVG feColorMatrix filter on their wrapper. Overlapping blurs then share one hard edge, which looks like blobs merging.

Why don't my blobs merge?

The filter is probably on each blob. Put it on the element that wraps all of them.

Can it be a Server Component?

Yes. LavaLamp has no state or effects; the motion is CSS keyframes.

Is Liquid Metal Blob a lava lamp?

No, it's one chrome drop drawn by a WebGL shader that follows the pointer and splits on click. For soft coloured blobs, the free CSS version on this page is the better fit.

Does Liquid Metal Blob work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.

Lava lamp component

components/lava-lamp.tsx

import "./lava-lamp.css"; const BLOBS = [ { size: 38, left: 4, duration: 18, delay: -2 }, { size: 26, left: 52, duration: 22, delay: -9 }, { size: 32, left: 30, duration: 16, delay: -5 }, { size: 22, left: 70, duration: 25, delay: -14 }, { size: 28, left: 16, duration: 20, delay: -11 }, ]; // Blurred circles + an SVG "goo" filter: the blur makes close blobs overlap, the colour matrix // turns the soft edge back into a hard one, so touching blobs melt into each other. // No state, no effects: it works as a Server Component. export function LavaLamp({ colors = ["#ff5f6d", "#ffc371"], className = "", filterId = "lava-goo", }: { colors?: [string, string]; className?: string; filterId?: string; }) { return ( <div aria-hidden className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`}> <svg width="0" height="0" className="absolute"> <filter id={filterId}> <feGaussianBlur in="SourceGraphic" stdDeviation="14" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -9" /> </filter> </svg> {/* container-type: size lets the keyframes move blobs by the box's own height (cqh) */} <div className="absolute inset-0" style={{ filter: `url(#${filterId})`, containerType: "size" }}> {BLOBS.map((b, i) => ( <span key={i} className="lava-blob absolute rounded-full" style={{ width: `${b.size}vmin`, aspectRatio: "1", left: `${b.left}%`, background: colors[i % 2], animationDuration: `${b.duration}s`, animationDelay: `${b.delay}s`, }} /> ))} </div> </div> ); }

components/lava-lamp.css

/* components/lava-lamp.css */
.lava-blob {
  bottom: 0;
  animation-name: lava-rise;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}

/* From just below the box to just above it, measured in the box's height (cqh). */
@keyframes lava-rise {
  0% { transform: translateY(100%) scale(1); }
  50% { transform: translateY(-50cqh) scale(1.15, 0.9); }
  100% { transform: translateY(-100cqh) scale(0.9, 1.1); }
}

/* Reduce Motion: no movement. The blobs stay parked halfway up, still merged. */
@media (prefers-reduced-motion: reduce) {
  .lava-blob { animation: none; transform: translateY(-40cqh); }
}

app/page.tsx (a hero with the lava lamp behind it)

import { LavaLamp } from "@/components/lava-lamp";

export default function Home() {
  return (
    <section className="relative isolate flex min-h-[80vh] items-center justify-center overflow-hidden bg-neutral-950 px-6">
      <LavaLamp colors={["#ff5f6d", "#ffc371"]} className="opacity-80" />
      <div className="relative text-center text-white">
        <h1 className="text-4xl font-semibold tracking-tight sm:text-6xl">Ship the weird idea</h1>
        <p className="mt-4 text-neutral-300">A lava lamp background in plain CSS and SVG.</p>
      </div>
    </section>
  );
}

Good to know

How the goo works: feGaussianBlur softens every blob so neighbours overlap in a haze, then feColorMatrix multiplies alpha by 22 and subtracts 9, which turns the haze back into a hard edge. Where two blurs overlap, the edge wraps both, so the blobs look like they melt together.

The filter has to sit on the wrapper around the blobs, not on each blob, or nothing merges. Keep the blobs in one colour family; the colour matrix leaves colour alone, so very different colours meet at a visible seam.

The blobs are sized in vmin so they scale with the smaller side of the screen, and they move in cqh, the wrapper's own height (it has container-type: size), so they cross the whole box on a phone and on a wide screen alike. cqh needs a browser with container query units; we ran it in Chromium only.

With Reduce Motion on, the animation stops and the blobs stay parked halfway up, still merged.

A blur filter over a full-screen layer is real GPU work on low-end phones. Fewer blobs, a smaller stdDeviation or a smaller box all cut it; we didn't measure frame rates.

It's a decoration: the root is aria-hidden and pointer-events-none, so it never takes clicks or screen-reader focus. Give each instance its own filterId if you render more than one on a page.

When you want liquid chrome, not lava: Liquid Metal Blob

CSS goo gives flat, soft blobs. If the background should look like metal, with reflections, a surface that reaches for the pointer and a blob that splits on click, that's shader territory.

Liquid Metal Blob is our paid piece for that. It's one drop of liquid chrome drawn by a raw WebGL 1 fragment shader, with no three.js and no packages. Small droplets orbit inside it, a third drop reaches toward the pointer and pulls a bridge out of the surface, and a click splits the blob in two, then merges it again. Chips switch the material between Chrome, Gold and Volt, or you pass your own tints.

The component draws a fixed 1000 x 660 stage, so the hero below centres it; on a phone you see the blob, not the edge of the stage. The text sits on top with pointer-events-none so the pointer still reaches the canvas.

Unlike the CSS version, it doesn't pause when scrolled out of view and the shader doesn't read Reduce Motion. If that matters for your page, render a still background instead when prefers-reduced-motion is set, as the AI orb guide does.

Its stylesheet only styles its own .qlm- classes, so it doesn't reach your theme.

components/metal-hero.tsx (Liquid Metal Blob)

"use client";
import LiquidMetal from "@/components/LiquidMetal";

// The paid swap: a WebGL chrome blob instead of CSS goo. It fills the hero and follows the pointer.
export function MetalHero({ children }: { children: React.ReactNode }) {
  return (
    <section className="relative isolate h-[560px] overflow-hidden bg-black">
      {/* LiquidMetal draws a fixed 1000 x 660 stage; centre it so phones see the blob, not the stage's edge */}
      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
        <LiquidMetal showChips={false} label={null} maxDpr={1.5} />
      </div>
      <div className="pointer-events-none relative z-10 flex h-full items-end justify-center pb-16 text-center text-white">
        {children}
      </div>
    </section>
  );
}

What we checked

Google suggests 9 completions for "lava lamp css" (effect, animation, background, menu) and 5 for "gooey effect css", read October 26, 2026.

All four files type-check with TypeScript 5.9.3 strict and build with next build on Next.js 15.5.28, React 19.1.1 and Tailwind 4.3.3; metal-hero.tsx against the Liquid Metal Blob source. In headless Chromium at 390 and 1440 px: the lava lamp hero and the metal hero both rendered with 0 page errors and no sideways scroll, and with Reduce Motion emulated the blobs' animation was none.

Questions

How do I make a lava lamp effect in CSS?

Blur a group of moving circles and raise the alpha contrast with an SVG feColorMatrix filter on their wrapper. Overlapping blurs then share one hard edge, which looks like blobs merging.

Why don't my blobs merge?

The filter is probably on each blob. Put it on the element that wraps all of them.

Can it be a Server Component?

Yes. LavaLamp has no state or effects; the motion is CSS keyframes.

Is Liquid Metal Blob a lava lamp?

No, it's one chrome drop drawn by a WebGL shader that follows the pointer and splits on click. For soft coloured blobs, the free CSS version on this page is the better fit.

Does Liquid Metal Blob work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.