ritual.sh/content/resources/lavalamp/index.md

914 B

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

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

Features

  • Pure CSS animation (no JavaScript required)
  • Customizable colors and blob shapes
  • Smooth, organic floating motion
  • Responsive design

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 create a realistic lava lamp effect.

Usage

Simply copy the HTML and CSS into your project. You can customize the colors by changing the gradient values and adjust the animation speed by modifying the animation duration.