Aurora / Gradient Mesh

Smooth, flowing gradient meshes and aurora borealis color washes — organic, ethereal, and visually mesmerizing.

html css javascript

Targets: JS HTML

Code

:root {
  --au-text: rgba(255, 255, 255, 0.95);
  --au-text-muted: rgba(255, 255, 255, 0.6);
  --au-glass-bg: rgba(255, 255, 255, 0.2);
  --au-glass-border: rgba(255, 255, 255, 0.3);
  --au-glass-hover: rgba(255, 255, 255, 0.28);
  --au-radius: 20px;
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
}

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

body {
  font-family: var(--font);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  color: var(--au-text);
  /* Animated aurora gradient mesh */
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 33%, #ec4899 66%, #f59e0b 100%);
  background-size: 400% 400%;
  animation: aurora 8s ease infinite;
}

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

/* ── Aurora streaks ── */
.aurora-streaks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.streak {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  animation: streakPulse 6s ease-in-out infinite;
  will-change: transform;
}

.streak--1 {
  width: 600px;
  height: 200px;
  background: rgba(255, 255, 255, 0.25);
  top: 10%;
  left: -10%;
  transform: rotate(-20deg);
  animation-delay: 0s;
}

.streak--2 {
  width: 700px;
  height: 150px;
  background: rgba(251, 191, 36, 0.3);
  top: 35%;
  right: -15%;
  transform: rotate(15deg);
  animation-delay: 1.5s;
}

.streak--3 {
  width: 500px;
  height: 180px;
  background: rgba(167, 139, 250, 0.35);
  bottom: 25%;
  left: 5%;
  transform: rotate(-10deg);
  animation-delay: 3s;
}

.streak--4 {
  width: 400px;
  height: 120px;
  background: rgba(34, 211, 238, 0.3);
  bottom: 10%;
  right: 10%;
  transform: rotate(25deg);
  animation-delay: 2s;
}

@keyframes streakPulse {
  0%,
  100% {
    opacity: 0.4;
    transform-origin: center;
  }
  50% {
    opacity: 0.65;
  }
}

/* ── Page ── */
.page {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ── Header ── */
.header {
  text-align: center;
}

.header__chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--au-text-muted);
  background: var(--au-glass-bg);
  border: 1px solid var(--au-glass-border);
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}

.header__title {
  font-size: clamp(52px, 10vw, 96px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: white;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

.header__title span {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 300;
}

.header__tagline {
  margin-top: 20px;
  font-size: 17px;
  font-weight: 300;
  color: var(--au-text-muted);
  line-height: 1.6;
}

/* ── Glass card ── */
.aurora-card {
  background: var(--au-glass-bg);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--au-glass-border);
  border-radius: var(--au-radius);
  padding: 28px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.aurora-card:hover {
  background: var(--au-glass-hover);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── Profile card ── */
.card-section {
  display: flex;
  justify-content: center;
}

.profile-card {
  width: 100%;
  max-width: 400px;
}

.card__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.avatar {
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
}

.card__info {
  flex: 1;
}

.card__name {
  font-size: 18px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.01em;
}

.card__role {
  font-size: 13px;
  color: var(--au-text-muted);
  margin-top: 3px;
  font-weight: 400;
}

.card__glow-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat {
  text-align: center;
  padding: 14px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.2s ease, transform 0.2s ease;
}

.stat:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.stat__value {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.03em;
}

.stat__label {
  display: block;
  font-size: 11px;
  color: var(--au-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 3px;
  font-weight: 500;
}

/* ── Controls card ── */
.controls-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Buttons ── */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  letter-spacing: 0.01em;
}

.btn--white {
  background: white;
  color: #1a0a2e;
}

.btn--white:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 35px rgba(255, 255, 255, 0.35);
}

.btn--white:active {
  transform: translateY(0);
}

.btn--glass {
  background: var(--au-glass-bg);
  color: white;
  border: 1px solid var(--au-glass-border);
  backdrop-filter: blur(10px);
}

.btn--glass:hover {
  background: var(--au-glass-hover);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.btn--ghost:hover {
  color: white;
  border-color: white;
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
}

/* ── Input ── */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--au-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.aurora-input {
  font-family: var(--font);
  font-size: 14px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  color: white;
  outline: none;
  backdrop-filter: blur(8px);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.aurora-input:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.aurora-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* ── Badges ── */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.badge:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 520px) {
  .page {
    padding: 32px 16px 48px;
    gap: 24px;
  }

  .header__title {
    font-size: clamp(36px, 12vw, 52px);
  }

  .header__chip {
    font-size: 10px;
    padding: 5px 14px;
    margin-bottom: 16px;
  }

  .header__tagline {
    font-size: 15px;
    margin-top: 14px;
  }

  .aurora-card {
    padding: 20px;
  }

  .profile-card {
    max-width: 100%;
  }

  .card__top {
    gap: 12px;
    margin-bottom: 18px;
  }

  .card__name {
    font-size: 16px;
  }

  .card__stats {
    gap: 8px;
  }

  .stat {
    padding: 10px 4px;
  }

  .stat__value {
    font-size: 20px;
  }

  .stat__label {
    font-size: 10px;
  }

  .button-row {
    gap: 8px;
  }

  .btn {
    font-size: 13px;
    padding: 10px 16px;
  }

  .streak--1 {
    width: 300px;
    height: 120px;
  }
  .streak--2 {
    width: 350px;
    height: 100px;
  }
  .streak--3 {
    width: 250px;
    height: 100px;
  }
  .streak--4 {
    width: 200px;
    height: 80px;
  }
}

/* Aurora / Gradient Mesh — Interactive JS */

(function () {
  "use strict";

  // ── Slow parallax on aurora streaks with mouse position ──
  const streaks = [
    { el: document.getElementById("streak1"), depth: 0.8 },
    { el: document.getElementById("streak2"), depth: -0.6 },
    { el: document.getElementById("streak3"), depth: 0.5 },
    { el: document.getElementById("streak4"), depth: -0.9 },
  ];

  let targetX = 0;
  let targetY = 0;
  let currentX = 0;
  let currentY = 0;
  let rafId = null;

  document.addEventListener("mousemove", (e) => {
    // Normalize to -1 → 1
    targetX = (e.clientX / window.innerWidth - 0.5) * 2;
    targetY = (e.clientY / window.innerHeight - 0.5) * 2;

    if (!rafId) {
      rafId = requestAnimationFrame(animateStreaks);
    }
  });

  function animateStreaks() {
    rafId = null;

    // Smooth lerp
    currentX += (targetX - currentX) * 0.05;
    currentY += (targetY - currentY) * 0.05;

    streaks.forEach(({ el, depth }) => {
      if (!el) return;
      // Max 15px parallax
      const ox = currentX * 15 * depth;
      const oy = currentY * 15 * depth;
      el.style.translate = `${ox}px ${oy}px`;
    });

    // Continue until settled
    const settled = Math.abs(targetX - currentX) < 0.001 && Math.abs(targetY - currentY) < 0.001;

    if (!settled) {
      rafId = requestAnimationFrame(animateStreaks);
    }
  }

  // ── Entrance: slide up with stagger ──
  const page = document.querySelector(".page");
  const sections = page ? Array.from(page.children) : [];

  sections.forEach((section, i) => {
    section.style.opacity = "0";
    section.style.transform = "translateY(30px)";
    section.style.transition = `
      opacity 0.6s ease ${i * 0.15}s,
      transform 0.7s cubic-bezier(0.34,1.56,0.64,1) ${i * 0.15}s
    `;
  });

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      sections.forEach((section) => {
        section.style.opacity = "1";
        section.style.transform = "";
      });
    });
  });

  // ── Stat counter animation ──
  function animateCounter(el, targetStr, duration = 1000) {
    const start = performance.now();
    const isFloat = targetStr.includes(".");
    const numStr = targetStr.replace(/[^0-9.]/g, "");
    const suffix = targetStr.replace(/[0-9.]/g, "");
    const target = parseFloat(numStr);

    requestAnimationFrame(function tick(now) {
      const progress = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      const current = eased * target;

      el.textContent = (isFloat ? current.toFixed(1) : Math.floor(current)) + suffix;

      if (progress < 1) requestAnimationFrame(tick);
    });
  }

  setTimeout(() => {
    document.querySelectorAll(".stat__value").forEach((el) => {
      const raw = el.textContent.trim();
      el.textContent = "0";
      animateCounter(el, raw, 1200);
    });
  }, 600);

  // ── Button: ripple on click ──
  document.querySelectorAll(".btn").forEach((btn) => {
    btn.style.position = "relative";
    btn.style.overflow = "hidden";

    btn.addEventListener("click", (e) => {
      const rect = btn.getBoundingClientRect();
      const size = Math.max(rect.width, rect.height) * 2;
      const x = e.clientX - rect.left - size / 2;
      const y = e.clientY - rect.top - size / 2;

      const ripple = document.createElement("span");
      ripple.style.cssText = `
        position: absolute;
        width: ${size}px;
        height: ${size}px;
        left: ${x}px;
        top: ${y}px;
        background: rgba(255,255,255,0.3);
        border-radius: 50%;
        transform: scale(0);
        animation: auroraRipple 0.55s ease-out forwards;
        pointer-events: none;
        z-index: 0;
      `;

      if (!document.getElementById("aurora-ripple-style")) {
        const style = document.createElement("style");
        style.id = "aurora-ripple-style";
        style.textContent = `
          @keyframes auroraRipple {
            to { transform: scale(1); opacity: 0; }
          }
        `;
        document.head.appendChild(style);
      }

      btn.appendChild(ripple);
      setTimeout(() => ripple.remove(), 600);
    });
  });

  // ── Input focus: shimmer ──
  const input = document.getElementById("auroraInput");
  if (input) {
    input.addEventListener("focus", () => {
      input.style.boxShadow = "0 0 0 3px rgba(255,255,255,0.12), 0 0 30px rgba(255,255,255,0.08)";
    });
    input.addEventListener("blur", () => {
      input.style.boxShadow = "";
    });
  }
})();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <title>Aurora / Gradient Mesh — Design Style</title>
  </head>
  <body>
    <!-- Aurora streak layers -->
    <div class="aurora-streaks" aria-hidden="true">
      <div class="streak streak--1" id="streak1"></div>
      <div class="streak streak--2" id="streak2"></div>
      <div class="streak streak--3" id="streak3"></div>
      <div class="streak streak--4" id="streak4"></div>
    </div>

    <div class="page">
      <!-- Header -->
      <header class="header">
        <div class="header__chip">Northern Lights UI</div>
        <h1 class="header__title">Aurora<br /><span>Gradient</span></h1>
        <p class="header__tagline">Flowing color meshes — organic, ethereal, mesmerizing.</p>
      </header>

      <!-- Profile glass card -->
      <section class="card-section">
        <div class="aurora-card profile-card">
          <div class="card__top">
            <div class="avatar">
              <svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="54" height="54" rx="18" fill="rgba(255,255,255,0.15)"/>
                <rect width="54" height="54" rx="18" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1.5"/>
                <circle cx="27" cy="20" r="10" fill="rgba(255,255,255,0.5)"/>
                <path d="M7 50c0-11.046 8.954-20 20-20s20 8.954 20 20" fill="rgba(255,255,255,0.3)"/>
                <!-- Sparkle -->
                <path d="M42 10 l1 3 3 1-3 1-1 3-1-3-3-1 3-1z" fill="rgba(255,255,255,0.7)"/>
              </svg>
            </div>
            <div class="card__info">
              <h2 class="card__name">Aurora Wells</h2>
              <p class="card__role">Visual Engineer</p>
            </div>
            <div class="card__glow-badge">NEW</div>
          </div>

          <div class="card__stats">
            <div class="stat">
              <span class="stat__value">638</span>
              <span class="stat__label">Gradients</span>
            </div>
            <div class="stat">
              <span class="stat__value">5.0</span>
              <span class="stat__label">Rating</span>
            </div>
            <div class="stat">
              <span class="stat__value">22k</span>
              <span class="stat__label">Views</span>
            </div>
          </div>
        </div>
      </section>

      <!-- Controls -->
      <section class="aurora-card controls-card">
        <div class="button-row">
          <button class="btn btn--white">Explore Now</button>
          <button class="btn btn--glass">Learn More</button>
          <button class="btn btn--ghost">See Gallery →</button>
        </div>

        <div class="field">
          <label class="field__label" for="auroraInput">Search the cosmos</label>
          <input class="aurora-input" id="auroraInput" type="text" placeholder="Northern lights, gradient mesh..." />
        </div>

        <div class="badge-row">
          <span class="badge">Aurora</span>
          <span class="badge">Gradient</span>
          <span class="badge">Mesh</span>
          <span class="badge">Ethereal</span>
        </div>
      </section>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Aurora / Gradient Mesh

The Aurora style takes its visual cues from the northern lights — vast, sweeping bands of color that shift and breathe in slow motion across the sky. In CSS terms, this translates to an animated background-size: 400% 400% gradient mesh that cycles through sky blue, violet, deep pink, and amber over an 8-second loop, creating a constantly moving color environment that never repeats exactly.

Glass UI elements floating on top of the aurora are the natural complement: rgba(255,255,255,0.2) cards with backdrop-filter: blur(16px) give everything a frosted, cloud-like quality that references the atmospheric nature of the source material. White text at high opacity maintains readability against the shifting colors beneath.

The aurora streaks — four large, absolutely-positioned divs blurred to near-formlessness — add an additional depth layer between the background gradient and the UI surfaces. A slow mouse-position parallax effect causes these streaks to drift at different speeds, reinforcing the sense of looking through successive layers of atmosphere. Everything moves, but so slowly and smoothly that it feels restful rather than busy.

Key characteristics

Animated 4-stop gradient mesh (sky blue → violet → pink → amber) cycling at 8s
Four large aurora streak overlays with gentle glow and CSS pulse animation
White glass cards: rgba(255,255,255,0.2) + backdrop-filter: blur(16px)
Mouse-position parallax on aurora streaks (max 15px offset)
Solid white primary button for clear CTA contrast
All text white or near-white for aurora-background contrast

When to use it

Aurora / Gradient Mesh is ideal for hero sections, splash screens, creative portfolio covers, event landing pages, and any context where the goal is to produce an immediate “wow” reaction. The animated background is immersive and attention-commanding — it works best in full-viewport contexts rather than as a component inside a larger page layout.