Volumetric Smoke Cloud Backdrop

Colours in this gradient

• #020617
• #1e1b4b
• #4338ca
• #ffffff

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="smoke-stage">
  <div class="smoke-puff puff-1"></div>
  <div class="smoke-puff puff-2"></div>
  <div class="smoke-puff puff-3"></div>
  <div class="smoke-content">
    <div class="smoke-pill">Atmospheric Volume</div>
    <h1>Spectral Fog</h1>
    <p>Soft-diffused ambient volumetric haze simulating slow particulate convection.</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 volumetric ambient smoke/fog clouds background in pure HTML and CSS.

Requirements:
- Deep night backdrop (#020617).
- Multiple large radial gradient puff elements with heavy blur (filter: blur(80px)).
- Smooth slow floating oscillations with varying duration and scaling.
- Centered typography on top.
- prefers-reduced-motion fallback.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Layer multiple radial gradient elements with heavy blur filters.

2. 2

   Animate positions with gentle translate and scale keyframes.

3. 3

   Use opacity between 0.4 and 0.6 for organic atmospheric density.

Customisation tips

• Using alternate infinite keyframes gives seamless back-and-forth drift without hard cuts.

More backgrounds