Lava Blobs

Fetch snippet JSON: curl https://webspire.de/snippets/decorative/lava-blobs.json

Preview

Background

Customize

lava speed a lava speed b lava speed c

lava hue a lava hue b lava hue c

lava blur lava opacity lava size a lava size b lava size c

lava sat a lava sat b lava sat c

Quick Start

<div class="lava-blobs h-screen"><div class="lava-blob lava-blob-a"></div><div class="lava-blob lava-blob-b"></div><div class="lava-blob lava-blob-c"></div></div>

Details

Tailwind: v4.x
Browser: baseline-2024
A11y: prefers-reduced-motion
Size: 1984 bytes · 99 lines
Custom Properties: --lava-blur--lava-opacity--lava-hue-a--lava-sat-a--lava-speed-a--lava-size-a--lava-hue-b--lava-sat-b--lava-speed-b--lava-size-b--lava-hue-c--lava-sat-c--lava-speed-c--lava-size-c
Classes: .lava-blobs.lava-blob.lava-blob-a.lava-blob-b.lava-blob-c

lava blob background animated gradient ambient

Three blobs with heavy blur() and independent keyframe animations at different speeds (18 s, 13 s, 9 s). The non-synchronised durations prevent the motion from looping visibly. Each blob color and speed is individually controllable via CSS custom properties. Animations pause under prefers-reduced-motion: reduce.

Basic full-screen backdrop

<div class="lava-blobs h-screen">
  <div class="lava-blob lava-blob-a"></div>
  <div class="lava-blob lava-blob-b"></div>
  <div class="lava-blob lava-blob-c"></div>
  <div class="relative z-10 flex h-full items-center justify-center">
    <h1 class="text-5xl font-bold text-white drop-shadow-lg">Your content</h1>
  </div>
</div>

Custom palette

<div class="lava-blobs rounded-2xl h-64"
     style="--lava-hue-a: 260; --lava-hue-b: 300; --lava-hue-c: 220; --lava-blur: 40px">
  <div class="lava-blob lava-blob-a"></div>
  <div class="lava-blob lava-blob-b"></div>
  <div class="lava-blob lava-blob-c"></div>
</div>