Aurora Veil

<div class="aurora-veil">
  <div class="aurora-veil__blob aurora-veil__blob--one"></div>
  <div class="aurora-veil__blob aurora-veil__blob--two"></div>
  <div class="aurora-veil__blob aurora-veil__blob--three"></div>
  <div class="aurora-veil__content">
    <h1>Aurora Veil</h1>
    <p>Drop any content on top of the drifting glow.</p>
  </div>
</div>


<style>
.aurora-veil {
  position: relative;
  width: min(100%, 560px);
  min-height: 300px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #08090f;
}

.aurora-veil__blob {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  animation: aurora-drift 14s ease-in-out infinite alternate;
}

.aurora-veil__blob--one {
  top: -20%;
  left: -10%;
  background: #7c3aed;
}

.aurora-veil__blob--two {
  top: 10%;
  right: -15%;
  background: #0ea5e9;
  animation-delay: -4s;
}

.aurora-veil__blob--three {
  bottom: -25%;
  left: 25%;
  background: #db2777;
  animation-delay: -9s;
}

.aurora-veil__content {
  position: relative;
  text-align: center;
  padding: 24px;
}

.aurora-veil__content h1 {
  margin: 0;
  font-size: 1.8rem;
  color: #f4f5fb;
}

.aurora-veil__content p {
  margin: 10px 0 0;
  font-size: 0.95rem;
  color: rgba(244, 245, 251, 0.65);
}

@keyframes aurora-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(12%, 10%, 0) scale(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-veil__blob {
    animation: none;
  }
}

</style>