Tailwind UI Pattern Registry for humans and agents

aurora gradient animated background ambient animated background for hero sections ambient color-shifting backdrop northern lights visual effect static gradients feel lifeless need animated background without JS want aurora borealis effect in pure CSS

Aurora

Fetch snippet JSON: curl https://webspire.de/snippets/decorative/aurora.json
Format
Aurora Ambient color wash
Stage Background
Customize

Quick Start

<div class="aurora h-screen"></div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
652 bytes · 32 lines
Custom Properties
--aurora-color-1--aurora-color-2--aurora-color-3--aurora-speed
Classes
.aurora
aurora gradient animated background ambient

An animated aurora borealis effect using a linear-gradient with background-size: 300% that shifts via keyframe animation. The colors blend smoothly thanks to OKLCH.

Full-screen aurora background

<section class="aurora relative h-screen">
  <div class="relative z-10 flex h-full items-center justify-center">
    <h1 class="text-5xl font-bold text-white drop-shadow-lg">Aurora</h1>
  </div>
</section>

Behind content with reduced speed

<div class="aurora rounded-xl p-12" style="--aurora-speed: 15s">
  <p class="text-white font-semibold">Slow, ambient aurora</p>
</div>