Skip to main content
A beautiful aurora or southern lights background effect that creates a mesmerizing, animated gradient background for your website.

​
Installation

Add the following entry to inline theme in your main.css file: 
@theme inline {
  --animate-aurora: aurora 60s linear infinite;
  @keyframes aurora {
    from {
      background-position:
        50% 50%,
        50% 50%;
    }
    to {
      background-position:
        350% 50%,
        350% 50%;
    }
  }
}

​
Props

Prop NameTypeDefaultDescription
classstring-Additional CSS classes to apply to the component for styling.
radialGradientbooleantrueDetermines whether a radial gradient effect is applied to the background.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us