27 lines
1 KiB
Markdown
27 lines
1 KiB
Markdown
---
|
|
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.
|