Frosted Glass Multi-Glow Mesh

Colours in this gradient

• #020617
• #6366f1
• #ec4899
• #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="f-mesh-stage">
  <div class="f-glow fg-1"></div>
  <div class="f-glow fg-2"></div>
  <div class="f-glow fg-3"></div>
  <div class="f-glass"></div>
  <div class="f-content">
    <div class="f-badge">Ambient Illumination</div>
    <h1>Prismatic Glass</h1>
    <p>Multi-spectral radial light beacons diffused through optical frosted glass.</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 a modern multi-color frosted glass ambient glow background in pure HTML and CSS.

Requirements:
- 3 distinct colored blurred circles (indigo, pink, cyan).
- Frosted glass overlay on top with backdrop-filter: blur(60px) and semi-transparent dark tint.
- Crisp centered typography with gradient clipped text.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Position glowing colored circles using absolute coordinates and filter: blur(100px).

2. 2

   Layer a full-screen frosted glass overlay with backdrop-filter: blur(60px).

3. 3

   Place text with relative z-index on top.

Customisation tips

• The frosted glass overlay smoothly blends the color boundaries into liquid light.

More backgrounds