Lava Lamp

The code

A glimpse of the source:

<div class="lava-container">
    <div class="lava-blob">
    </div>
    <div class="lava-blob">
    </div>
    <div class="lava-blob">
    </div>
    <div class="lava-glass">
    </div>
  </div>

Concrete use cases

A few real contexts where Lava Lamp shines:

• A living button on a landing page
• The mood of an event page
• An original loader

How it works

Pure CSS effect — no JavaScript dependency. It relies on a @keyframes animation, CSS filters and CSS transforms.

Make it yours

You can tweak:

• animation speed (currently 0s)

Add it in 3 steps

1. Paste the HTML where you want the effect on your page.
2. Add the CSS to your stylesheet (or in a <style> tag).
3. Tweak the colors and CSS variables to match your brand — nothing to install.

Browser support

Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation.

More Liquid effects

FAQ