Aurora Borealis Glow

backgrounds

Dynamic flowing northern lights gradient background with silky ambient color transitions.

#aurora#background#glow#ambient#spatial

Live Interactive Preview

Aurora Ambient Background

Component Source Code

Select language in the dropdown

AuroraBackground.tsx

1'use client';
2
3import React from 'react';
4
5export default function AuroraBackground() {
6  return (
7    <div className="relative h-64 w-full max-w-md overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-slate-950 p-6 flex flex-col justify-between select-none">
8      <div className="absolute -inset-[10px] opacity-50 blur-3xl pointer-events-none">
9        <div className="absolute top-1/4 left-1/4 h-32 w-32 rounded-full bg-blue-600 animate-[spin_10s_linear_infinite]" />
10        <div className="absolute bottom-1/4 right-1/4 h-32 w-32 rounded-full bg-cyan-400 animate-[spin_8s_linear_infinite_reverse]" />
11        <div className="absolute top-1/2 right-1/3 h-28 w-28 rounded-full bg-violet-600 animate-[spin_12s_linear_infinite]" />
12      </div>
13
14      <div className="relative z-10">
15        <span className="rounded-full bg-cyan-400/20 border border-cyan-400/40 px-3 py-1 text-[10px] font-bold tracking-wider text-cyan-300 uppercase">
16          Atmospheric
17        </span>
18      </div>
19
20      <div className="relative z-10">
21        <h3 className="text-xl font-extrabold text-white">Aurora Light Matrix</h3>
22        <p className="text-xs text-slate-300 mt-1">Multi-layered radial luminescence.</p>
23      </div>
24    </div>
25  );
26}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/backgrounds/AuroraBackground.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import AuroraBorealisGlow from '@/components/backgrounds/AuroraBackground';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <AuroraBorealisGlow />
7    </main>
8  );
9}