# AuroraBackground

Source: https://lumeo.nativ.sh/components/aurora-background

# AuroraBackground

Northern-lights-style multi-layered radial gradient that slowly shifts hue and position via CSS keyframes. Zero JavaScript — pure CSS.

## When to Use

-   Hero section backgrounds on marketing or SaaS landing pages.
-   Pricing cards or feature highlight sections needing ambient depth.
-   Login / onboarding pages with a dreamy atmospheric feel.

Preview Code

Hero Wrap

## Welcome

Aurora background example

Copy Code

## API Reference

### AuroraBackground

Property

Type

Default

Description

ChildContent

RenderFragment?

null

Content layered above the aurora effect.

Class

string?

null

Additional CSS classes (e.g. sizing and overflow control).

## Related Components

-   [RetroGrid](/components/retro-grid) — Perspective-projected grid floor animation.
-   [BackgroundBeams](/components/background-beams) — Animated SVG beam network for hero backgrounds.