Aurora UI

/* via superdesign.dev/styles/aurora */

/* Static CSS aurora: a dark base, four radial-gradient color layers,
   and one heavily blurred conic-gradient ::before that drifts. Cheap,
   ships anywhere, no JavaScript. */
.aurora {
  position: relative;
  overflow: hidden;
  /* the dark base is mandatory: aurora over white dies */
  background-color: #05010f;
  /* four soft color blooms in aurora hues */
  background-image:
    radial-gradient(40% 50% at 20% 30%, rgba(99, 102, 241, 0.55) 0%, transparent 70%),
    radial-gradient(45% 55% at 75% 25%, rgba(45, 212, 191, 0.45) 0%, transparent 70%),
    radial-gradient(50% 60% at 60% 75%, rgba(236, 72, 153, 0.40) 0%, transparent 70%),
    radial-gradient(40% 50% at 30% 80%, rgba(139, 92, 246, 0.45) 0%, transparent 70%);
}

/* the blurred, saturated conic layer is what turns hard stops into
   soft northern-lights light. blur does the melting; saturate keeps
   the colors from going gray. */
.aurora::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: conic-gradient(
    from 120deg at 50% 30%,
    #3a29ff, #2dd4bf, #ec4899, #8b5cf6, #3a29ff
  );
  filter: blur(80px) saturate(1.4);
  opacity: 0.55;
  animation: aurora-drift 18s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  from { transform: translate3d(-4%, -2%, 0) rotate(0deg); }
  to   { transform: translate3d(4%, 3%, 0) rotate(8deg); }
}

/* honor the user's motion preference: static fallback */
@media (prefers-reduced-motion: reduce) {
  .aurora::before { animation: none; }
}

/* put text on a panel, never on the raw drifting gradient */
.aurora-panel {
  position: relative;
  z-index: 1;
  background: rgba(10, 8, 20, 0.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  color: #fff;
}