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="aurora">
  <span class="blob blob-1"></span>
  <span class="blob blob-2"></span>
  <span class="blob blob-3"></span>
  <div class="content">
    <h1>Aurora Blobs</h1>
    <p>Soft animated glow, pure CSS.</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 full-screen "aurora" background using only HTML and CSS.

Requirements:
- A container that fills the viewport (min-height: 100vh) with a near-black navy background (#050816) and overflow hidden.
- Three absolutely positioned circular blobs, each about 45vw wide, coloured indigo (#2506ad), orange (#ff7b00) and cyan (#06b6d4).
- Apply filter: blur(90px) and opacity around 0.55 so they read as soft glows, not circles.
- Animate each blob with a slow (18s) ease-in-out keyframe animation that translates and slightly scales it, alternating direction. Give each blob a different negative animation-delay so they never move in sync.
- Centre a heading and a short paragraph above the blobs (position: relative so it sits on top), white text.
- Respect prefers-reduced-motion by disabling the animation.
- No JavaScript and no external libraries.

Return one HTML file with the CSS in a <style> tag.

How to build it, step by step

1. 1

   Create a wrapper with position: relative, min-height: 100vh and overflow: hidden. The overflow rule stops the blobs from causing scrollbars when they move off-screen.

2. 2

   Add three empty span elements for the blobs and position them absolutely in different corners.

3. 3

   Make each blob a circle with border-radius: 50%, then apply filter: blur(90px). The blur is what turns a hard circle into a glow.

4. 4

   Write one keyframe animation that moves and scales a blob, and apply it to all three with animation-direction: alternate so the motion reverses smoothly.

5. 5

   Give each blob a different negative animation-delay. A negative delay starts the animation part-way through, so the blobs are already out of sync on first paint.

6. 6

   Place your content in a child with position: relative so it stacks above the absolutely positioned blobs.

Customisation tips

• Change the three blob colours to match your brand; keep one warm and two cool colours for depth.
• Lower the opacity to 0.35 for a subtler effect behind long text.
• Large blurs are GPU-heavy. On low-end phones reduce the blur to 60px or hide one blob with a media query.

More backgrounds