26 lines
878 B
Markdown
26 lines
878 B
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: true
|
|
---
|
|
|
|
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.
|