Fluid Morphing Blob Mesh

Colours in this gradient

• #020617
• #ec4899
• #8b5cf6
• #38bdf8

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="blob-wrapper">
  <div class="blob-stage">
    <div class="morph-blob mb-1"></div>
    <div class="morph-blob mb-2"></div>
    <div class="morph-blob mb-3"></div>
  </div>
  <div class="blob-glass"></div>
  <div class="blob-content">
    <span class="blob-badge">Organic Physics</span>
    <h1>Liquid Morphology</h1>
    <p>Pure CSS border-radius morphing keyframes simulating molten fluid dynamics.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create an animated fluid morphing blob mesh background in HTML and CSS.

Requirements:
- Organic blob elements animating border-radius between asymmetric percentages.
- Combination of rotating transform and morphing keyframes.
- Heavy blur filter (filter: blur(50px)) and top frosted glass overlay.
- Centered typography on top.
- prefers-reduced-motion compatibility.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Use 8-value border-radius (e.g. 60% 40% 30% 70% / 60% 30% 70% 40%) to create organic asymmetric blobs.

2. 2

   Animate border-radius across keyframes for fluid stretching.

3. 3

   Layer multiple colorful blobs and add backdrop-filter blur for luminous glow.

Customisation tips

• Pair border-radius morphing with a slow rotate(360deg) animation for seamless organic variation.

More backgrounds