ritual/ritual.sh
ritual/ritual.sh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ritual.sh/content/resources/lavalamp/index.md

1 KiB
Raw Blame History

title date description icon demo_url source_url draft
HTML/CSS Lavalamp 2026-01-04 A pure CSS lavalamp animation with floating blobs lavalamp false

A mesmerizing lavalamp effect created with HTML, CSS, and JavaScript. Features smooth floating animations and gradient blobs that rise and fall like a classic lava lamp.

Want Your Own Customizable Lava Lamp?

Check out the Adoptables page where you can customize your own lava lamp with your choice of colors, blob count, and animation speed - then get the embed code to add it to your own website!

Features

  • Smooth, organic floating motion
  • Customizable colors and blob shapes
  • Adjustable animation speed and blob count
  • Responsive design
  • Self-contained embed code

How It Works

The animation uses CSS keyframes to create the illusion of blobs floating up and down. Multiple blob elements with different animation delays and paths create a realistic lava lamp effect. An SVG filter creates the "goo" effect that makes the blobs merge together smoothly.