---
title: "HTML/CSS Lavalamp"
date: 2026-01-04
tags: ["css", "html", "animation"]
description: "A pure CSS lavalamp animation with floating blobs"
icon: "lavalamp"
demo_url: ""
source_url: ""
draft: 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.