Agence WagnerAgence Wagner
FRENDEELS
Back to designs
ClairGradientsColoré
Preview

Aurora Gradient Reference

Aurora Gradient is a dreamy, ethereal design aesthetic inspired by the Northern Lights (Aurora Borealis). It employs smooth, flowing color transitions across purple, pink, blue, green, and teal -- mimicking the undulating luminescence of polar skies. The style creates interfaces that feel cosmic and serene, using multi-stop gradients, soft blur effects, and translucent layers to evoke a sense of wonder. Every surface seems to glow from within, as if illuminated by distant celestial light.

Visual Characteristics

Core Design Traits

  • Multi-stop flowing gradients -- smooth transitions through 3-5 colors (purple, pink, blue, green, teal) that mimic aurora curtains
  • Soft, diffused color washes -- backgrounds feel painted with light rather than filled with flat color
  • Translucent glass layers -- frosted-glass cards and surfaces that reveal gradient backgrounds beneath
  • Ethereal glow effects -- soft radial glows and gradient overlays that simulate luminescence
  • Cool-to-warm color flow -- palettes transition from deep blues and purples through pinks to greens and teals
  • Generous blur and feathering -- backdrop-filter blur and soft-edged shapes create atmospheric depth
  • Dark or deep-toned bases -- aurora gradients pop most against midnight-blue or deep purple backgrounds
  • Smooth, organic shapes -- blob-like forms and rounded containers complement the flowing color transitions
  • Subtle animation -- slow, gentle color shifts and gradient movement that mimic the aurora's natural dance
  • Light, airy typography -- thin-to-medium weight fonts that don't compete with the gradient spectacle

Design Principles

  • Let the gradient be the hero: design everything else to support and not compete with it
  • Use translucency to create depth while keeping the aurora visible through layers
  • Dark backgrounds make gradients glow; avoid pure white bases that flatten the effect
  • Color transitions should feel natural and smooth -- never harsh or banded
  • Blur effects create atmosphere; use them on overlays, cards, and decorative elements
  • Keep UI elements minimal so the celestial backdrop remains the focal point
  • Animation should be slow and meditative, never jarring -- think time-lapse, not strobe
  • Text on gradients needs careful contrast management: use solid-background chips or text shadows

Color Palette

Aurora Gradient Core Palette

Colors drawn from the actual Aurora Borealis: ionized oxygen (green, red), ionized nitrogen (blue, purple), with artistic additions of pink and teal for digital expression.

Color Name Hex Role / Usage
Midnight Sky #0B0D1A Deepest background, page base
Deep Space #111827 Primary surface, card base before glass effect
Cosmic Blue #1E1B4B Elevated surfaces, section backgrounds
Aurora Purple #7C3AED Primary purple gradient stop, accent elements
Aurora Violet #A855F7 Mid-tone purple, badges, tags
Aurora Pink #EC4899 Warm gradient stop, CTAs, highlights
Aurora Rose #F472B6 Soft pink, secondary accents
Aurora Blue #3B82F6 Cool gradient stop, links, info states
Aurora Cyan #06B6D4 Teal gradient stop, secondary interactive
Aurora Green #10B981 Green gradient stop, success states
Aurora Mint #34D399 Light green, positive indicators
Stardust #E0E7FF Primary text on dark backgrounds
Nebula #A5B4FC Secondary text, descriptions
Cosmic Dust #6366F1 Muted accent, tertiary text on dark
Starlight #F8FAFC Bright text, maximum contrast

CSS Custom Properties

:root {
  /* Dark bases */
  --aurora-midnight: #0b0d1a;
  --aurora-deep-space: #111827;
  --aurora-cosmic: #1e1b4b;

  /* Aurora spectrum */
  --aurora-purple: #7c3aed;
  --aurora-violet: #a855f7;
  --aurora-pink: #ec4899;
  --aurora-rose: #f472b6;
  --aurora-blue: #3b82f6;
  --aurora-cyan: #06b6d4;
  --aurora-green: #10b981;
  --aurora-mint: #34d399;

  /* Text */
  --aurora-text-primary: #e0e7ff;
  --aurora-text-secondary: #a5b4fc;
  --aurora-text-muted: #6366f1;
  --aurora-text-bright: #f8fafc;

  /* Signature gradients */
  --aurora-gradient-full: linear-gradient(135deg, #7c3aed, #ec4899, #3b82f6, #06b6d4, #10b981);
  --aurora-gradient-warm: linear-gradient(135deg, #7c3aed, #a855f7, #ec4899, #f472b6);
  --aurora-gradient-cool: linear-gradient(135deg, #3b82f6, #06b6d4, #10b981, #34d399);
  --aurora-gradient-subtle: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(236,72,153,0.1), rgba(6,182,212,0.15));

  /* Glass */
  --aurora-glass-bg: rgba(255, 255, 255, 0.05);
  --aurora-glass-border: rgba(255, 255, 255, 0.1);
  --aurora-glass-blur: 16px;
}

Typography

Typeface Characteristics

Aurora Gradient typography is:

  • Light to medium weight -- thin, elegant fonts that let the gradient backgrounds shine through
  • Modern and geometric -- clean letterforms that complement the smooth gradient curves
  • High legibility on dark backgrounds -- tall x-height and open counters for readability against complex gradients
  • Subtly luminous -- text can pick up gradient colors through subtle text-shadow or color inheritance
  • Airy with generous spacing -- relaxed letter-spacing and line-height to match the ethereal mood
Font Style Best For
Sora Geometric, modern, variable weight Headlines, hero text -- perfect aurora companion
Inter Screen-optimized, versatile Body text, labels, UI elements
Outfit Geometric, contemporary Headlines, metrics, clean modern feel
Albert Sans Geometric, clean Body text, all-purpose on dark backgrounds
Figtree Geometric, friendly, open Body text, approachable aurora interfaces
Urbanist Geometric, tall, modern Headlines, navigation, elegant headers
Lexend Designed for reading ease Body text, accessibility-focused aurora pages
Plus Jakarta Sans Geometric, slightly rounded Headlines, warm yet modern feel

Font Pairing Suggestions

Heading Font Body Font Character
Sora (600) Inter (400) Clean, modern, cosmic elegance
Urbanist (600) Figtree (400) Tall and elegant meets friendly body
Outfit (600) Albert Sans (400) Contemporary, balanced, geometric
Plus Jakarta Sans (700) Inter (400) Warm headers, crisp body
Sora (700) Lexend (400) Bold display, accessible reading

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap');

h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  color: var(--aurora-text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.aurora-display {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: var(--aurora-gradient-full);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--aurora-text-secondary);
}

.aurora-label {
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
}

.aurora-caption {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--aurora-text-secondary);
}

Layout Principles

Grid and Structure

  • Full-viewport gradient backgrounds -- the aurora gradient often spans the entire page or large sections
  • Glassmorphic card layers -- translucent cards float above the gradient, creating depth
  • Centered, constrained content -- max-width 1100px keeps content readable against flowing backgrounds
  • Vertical rhythm through gradient shifts -- sections transition through different gradient phases
  • Organic, flowing section breaks -- wavy SVG dividers or gradient fades between sections
  • Generous vertical spacing -- 100-140px between sections to let the gradient breathe

Section Organization

  • Navigation: Transparent or glass-effect nav bar that reveals the gradient beneath
  • Hero: Full-height gradient background with large display text (often gradient-clipped), centered
  • Features: Glass cards floating on the gradient background in a clean grid
  • Showcase: Large section where the gradient itself is the visual feature
  • Metrics: Gradient-text numbers on dark translucent cards
  • CTA section: Concentrated gradient area with glass button
  • Footer: Fade to deepest dark with muted text

Responsive Approach

  • Gradients scale naturally across all screen sizes
  • Glass cards stack vertically on mobile while maintaining translucency
  • Background gradient can simplify (fewer stops) on mobile for performance
  • Text on gradient requires extra contrast attention on small screens
  • Blur effects may be reduced on mobile devices for performance

CSS / Design Techniques

Aurora Background

.aurora-bg {
  background: var(--aurora-midnight);
  position: relative;
  overflow: hidden;
}

.aurora-bg::before {
  content: '';
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(124, 58, 237, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(6, 182, 212, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 20%, rgba(16, 185, 129, 0.15) 0%, transparent 50%);
  animation: auroraShift 20s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes auroraShift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-5%, 3%) rotate(1deg); }
  100% { transform: translate(3%, -2%) rotate(-1deg); }
}

Glass Card

.aurora-glass {
  background: var(--aurora-glass-bg);
  backdrop-filter: blur(var(--aurora-glass-blur));
  -webkit-backdrop-filter: blur(var(--aurora-glass-blur));
  border: 1px solid var(--aurora-glass-border);
  border-radius: 16px;
  padding: 32px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.aurora-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.aurora-glass--strong {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

Aurora Button

.aurora-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--aurora-gradient-warm);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 14px 36px;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.aurora-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.3);
}

.aurora-button--glass {
  background: var(--aurora-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--aurora-glass-border);
  color: var(--aurora-text-primary);
}

.aurora-button--glass:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.aurora-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
  position: relative;
  z-index: 10;
}

.aurora-nav__logo {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  background: var(--aurora-gradient-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}

.aurora-nav__links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.aurora-nav__links a {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--aurora-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.aurora-nav__links a:hover {
  color: var(--aurora-text-bright);
}

Hero Section

.aurora-hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 40px;
  position: relative;
  z-index: 1;
}

.aurora-hero h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  background: var(--aurora-gradient-full);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aurora-hero p {
  font-size: 1.2rem;
  color: var(--aurora-text-secondary);
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

Gradient Text

.aurora-gradient-text {
  background: var(--aurora-gradient-full);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: textShimmer 6s ease-in-out infinite alternate;
}

@keyframes textShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

Wavy Section Divider

.aurora-wave {
  position: relative;
  height: 80px;
}

.aurora-wave svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
}

.aurora-wave path {
  fill: var(--aurora-deep-space);
}

Design Do's and Don'ts

Do

  • Use multi-stop gradients with smooth transitions through the aurora spectrum
  • Pair gradients with dark backgrounds for maximum luminous impact
  • Layer translucent glass elements to create depth and atmosphere
  • Animate gradients slowly and subtly to mimic the aurora's natural movement
  • Use gradient-clipped text for display headings as a focal point
  • Apply backdrop-filter blur on overlaying elements for the glass effect
  • Maintain sufficient text contrast on gradient backgrounds using text shadows or solid chips
  • Let the gradient be the star; keep UI elements simple and understated

Don't

  • Use gradients on light/white backgrounds -- they lose their luminous quality
  • Create harsh, banded color transitions -- all shifts should be smooth and diffused
  • Animate gradients quickly or erratically -- the aurora effect requires slow, meditative motion
  • Layer too many glass elements -- performance suffers and the effect becomes muddy
  • Use more than one gradient system per page -- pick one aurora flow and commit
  • Pair with sharp, angular, geometric patterns -- organic, flowing shapes complement better
  • Ignore text readability: gradient backgrounds make contrast unpredictable
  • Apply the aurora effect to small elements like buttons or badges -- it works best at large scale
Aesthetic Relationship to Aurora Gradient
Glassmorphism Core technique; frosted glass cards layered on aurora gradients create the signature effect
Dark Aero Shares dark-base translucency; aurora adds flowing color where Dark Aero stays monochrome
Frutiger Aero Predecessor; glossy, nature-inspired UI that aurora aesthetics update with cosmic gradients
Laser Grid Shares vivid neon-on-dark approach but with rigid geometric grids instead of organic flows
Acid Design Both use vivid gradients but Acid pushes toward chaos while Aurora maintains serenity
Flat Design Opposite approach; solid, flat colors without any gradients, blur, or depth effects
Neumorphism Contrasting approach; monochromatic soft shadows vs. polychromatic luminous gradients
Cosmic Shares celestial inspiration; aurora focuses on light phenomena while Cosmic includes stars and space
Cyberminimalism Both can coexist; minimal UI structure with aurora gradients as the decorative layer
Dopamine Design Shares bold color but channels it into structured, energetic compositions rather than flowing serenity

Quick-Start: Minimal Aurora Gradient Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aurora Gradient Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --aurora-midnight: #0b0d1a;
      --aurora-deep-space: #111827;
      --aurora-cosmic: #1e1b4b;
      --aurora-purple: #7c3aed;
      --aurora-violet: #a855f7;
      --aurora-pink: #ec4899;
      --aurora-rose: #f472b6;
      --aurora-blue: #3b82f6;
      --aurora-cyan: #06b6d4;
      --aurora-green: #10b981;
      --aurora-mint: #34d399;
      --aurora-text-primary: #e0e7ff;
      --aurora-text-secondary: #a5b4fc;
      --aurora-text-muted: #6366f1;
      --aurora-text-bright: #f8fafc;
      --aurora-glass-bg: rgba(255, 255, 255, 0.05);
      --aurora-glass-border: rgba(255, 255, 255, 0.1);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--aurora-midnight);
      color: var(--aurora-text-secondary);
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      line-height: 1.7;
      overflow-x: hidden;
    }

    h1, h2, h3 {
      font-family: 'Sora', sans-serif;
      font-weight: 600;
      color: var(--aurora-text-primary);
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    /* Aurora background effect */
    .aurora-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    .aurora-bg::before {
      content: '';
      position: absolute;
      width: 150%;
      height: 150%;
      top: -25%;
      left: -25%;
      background:
        radial-gradient(ellipse at 20% 50%, rgba(124,58,237,0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(236,72,153,0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(6,182,212,0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 20%, rgba(16,185,129,0.15) 0%, transparent 50%);
      animation: auroraShift 20s ease-in-out infinite alternate;
    }

    @keyframes auroraShift {
      0% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(-5%, 3%) rotate(1deg); }
      100% { transform: translate(3%, -2%) rotate(-1deg); }
    }

    /* All content above aurora bg */
    .content { position: relative; z-index: 1; }

    /* Navigation */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 40px;
    }

    nav a.logo {
      font-family: 'Sora', sans-serif;
      font-weight: 700;
      font-size: 1.3rem;
      background: linear-gradient(135deg, var(--aurora-purple), var(--aurora-pink));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-decoration: none;
    }

    nav ul { display: flex; gap: 32px; list-style: none; }

    nav ul a {
      color: var(--aurora-text-secondary);
      text-decoration: none;
      font-weight: 500;
      font-size: 0.9rem;
      transition: color 0.2s;
    }

    nav ul a:hover { color: var(--aurora-text-bright); }

    /* Hero */
    .hero {
      min-height: 80vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 80px 40px;
    }

    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      font-weight: 700;
      margin-bottom: 1.5rem;
      letter-spacing: -0.03em;
      background: linear-gradient(135deg, #7c3aed, #ec4899, #3b82f6, #06b6d4, #10b981);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero p {
      font-size: 1.2rem;
      margin-bottom: 2.5rem;
      max-width: 580px;
      margin-left: auto;
      margin-right: auto;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--aurora-purple), var(--aurora-pink));
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 14px 36px;
      font-family: 'Sora', sans-serif;
      font-weight: 600;
      font-size: 0.95rem;
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(124, 58, 237, 0.3);
    }

    .btn--glass {
      background: var(--aurora-glass-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--aurora-glass-border);
      color: var(--aurora-text-primary);
    }

    /* Features */
    .features {
      padding: 80px 40px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .features h2 { text-align: center; font-size: 2rem; margin-bottom: 48px; }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }

    .glass-card {
      background: var(--aurora-glass-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--aurora-glass-border);
      border-radius: 16px;
      padding: 32px;
      transition: background 0.3s, border-color 0.3s;
    }

    .glass-card:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .card-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }

    .glass-card h3 { font-size: 1.15rem; margin-bottom: 0.75rem; }
    .glass-card p { font-size: 0.95rem; line-height: 1.6; }

    /* CTA */
    .cta {
      text-align: center;
      padding: 100px 40px;
    }

    .cta-inner {
      background: var(--aurora-glass-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--aurora-glass-border);
      border-radius: 24px;
      padding: 60px 40px;
      max-width: 800px;
      margin: 0 auto;
    }

    .cta h2 { font-size: 2rem; margin-bottom: 1rem; }
    .cta p { margin-bottom: 2rem; }

    /* Footer */
    footer {
      text-align: center;
      padding: 40px;
      font-size: 0.85rem;
      color: var(--aurora-text-muted);
    }

    @media (max-width: 768px) {
      .hero { min-height: 60vh; padding: 60px 20px; }
      nav { padding: 16px 20px; }
      nav ul { gap: 16px; }
      .cta-inner { padding: 40px 24px; }
    }
  </style>
</head>
<body>
  <div class="aurora-bg"></div>

  <div class="content">
    <nav>
      <a href="#" class="logo">Aurora</a>
      <ul>
        <li><a href="#">Product</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>

    <section class="hero">
      <div>
        <h1>Design that glows from within</h1>
        <p>Experience interfaces inspired by the Northern Lights. Flowing gradients, translucent layers, and cosmic serenity.</p>
        <a href="#" class="btn">Explore Aurora</a>
      </div>
    </section>

    <section class="features">
      <h2>Celestial features</h2>
      <div class="features-grid">
        <div class="glass-card">
          <div class="card-icon" style="background:rgba(124,58,237,0.2);">
            <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" fill="none" stroke="#a855f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <h3>Layered Depth</h3>
          <p>Translucent glass surfaces create natural hierarchy. Content floats above cosmic gradients with effortless elegance.</p>
        </div>
        <div class="glass-card">
          <div class="card-icon" style="background:rgba(236,72,153,0.2);">
            <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="none" stroke="#ec4899" stroke-width="2"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="#ec4899" stroke-width="2" stroke-linecap="round"/></svg>
          </div>
          <h3>Living Color</h3>
          <p>Gradients shift and flow like the aurora itself. Slow, meditative animations create a sense of wonder and serenity.</p>
        </div>
        <div class="glass-card">
          <div class="card-icon" style="background:rgba(6,182,212,0.2);">
            <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" fill="none" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <h3>Cosmic Calm</h3>
          <p>Dark foundations and soft light create interfaces that reduce eye strain while maintaining visual richness.</p>
        </div>
      </div>
    </section>

    <section class="cta">
      <div class="cta-inner">
        <h2>Ready to see the lights?</h2>
        <p>Join creators who design with the beauty of the aurora borealis.</p>
        <a href="#" class="btn--glass btn">Get Started Free</a>
      </div>
    </section>

    <footer>
      <p>Built with Aurora Gradient aesthetics. Dreamy, luminous, serene.</p>
    </footer>
  </div>
</body>
</html>
← Back to designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. All rights reserved.

Designs from chrislemke/website_designs, licensed under MIT.