Aurora Gradient

Name: Aurora Gradient
Author: Effects Platform
Tier A Free CSS
Animation speed (s): 12s
Export HTML + CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Aurora Gradient — Effects Platform export</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body { display: flex; align-items: center; justify-content: center; background: #111; }
    @keyframes fx-aurora {
  0% {
    background-position: 0% 50%;
    transform: scale(1);
  }
  33% {
    background-position: 100% 50%;
    transform: scale(1.03);
  }
  66% {
    background-position: 0% 100%;
    transform: scale(0.98);
  }
  100% {
    background-position: 0% 50%;
    transform: scale(1);
  }
}

.fx-aurora-gradient {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: linear-gradient(
    135deg,
    #0d1b2a 0%,
    #1b3a4b 10%,
    #006466 25%,
    #0d3b00 40%,
    #003566 55%,
    #6a0572 70%,
    #1b3a4b 85%,
    #0d1b2a 100%
  );
  background-size: 400% 400%;
  animation-name: fx-aurora;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: background-position, transform;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .fx-aurora-gradient {
    animation-play-state: paused;
    background-position: 0% 50%;
    transform: scale(1);
  }
}

.fx-aurora-gradient {
  animation-duration: 12s;
}
  </style>
</head>
<body>
  <div class="fx-aurora-gradient" role="img" aria-label="Aurora Gradient animation"></div>
</body>
</html>