---
title: "HTML/CSS Lavalamp"
date: 2026-01-04
description: "A pure CSS lavalamp animation with floating blobs"
icon: "lavalamp"
demo_url: ""
source_url: ""
draft: 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](/resources/adoptables/) 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.