backgrounds

Aurora

Flowing northern lights effect using animated CSS gradient layers with mix-blend-mode for atmospheric depth.

v1.0.0react >=18next >=14tailwind >=4

backgroundauroranorthern-lightsgradientblenddecorativeanimated

Preview

Loading preview...

Props

Prop	Type	Default	Description
`colors`	`string[]`	`["#ee502c40", "#8b5cf640", "#06b6d440"]`	Array of CSS color values with alpha for translucent aurora layers
`speed`	`number`	`6`	Animation cycle duration in seconds
`blur`	`number`	`100`	Blur amount in pixels
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Layout

Display: block

Responsive: No

Fills container with absolute positioning and overflow hidden. Uses mix-blend-mode: screen. Requires a relative-positioned dark parent.

Examples

Basic aurora

<div className="relative h-screen bg-black">
  <Aurora />
  <div className="relative z-10 flex items-center justify-center h-full">
    <h1 className="text-white text-5xl font-bold">Welcome</h1>
  </div>
</div>

Custom warm palette

<div className="relative h-96 bg-neutral-950">
  <Aurora colors={["#f9731640", "#ef444440", "#eab30840"]} speed={10} />
</div>

Subtle and slow

<div className="relative h-96 bg-black">
  <Aurora blur={150} speed={15} colors={["#3b82f620", "#8b5cf620"]} />
</div>

AI Usage Hint

Use Aurora for a dramatic, flowing light effect. Best on dark backgrounds. Pass colors with alpha (e.g., '#ee502c40') for translucent layers. Adjust speed and blur. Pair with hero sections for atmospheric depth.

Works Well With

DotGridParticles