Aurora Curtain Background: CSS Animated Background

Aurora Curtain Background

A folding curtain of aurora light ripples across a starry night, its bright green hem waving under a violet glow. Forty overlapping slices heave on staggered delays under one blur, so folds travel.

Also known as: aurora animation css, aurora borealis curtain css, northern lights curtain animation, aurora css.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-aurora-curtain" aria-hidden="true"><span class="bgx-aurora-curtain-veil"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></div>

CSS

.bgx-aurora-curtain {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(#02040a, #050d1f 55%, #0a1f2c);
  isolation: isolate;}
.bgx-aurora-curtain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 0.05em at 73.9% 43.7%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.1em at 41.9% 21.8%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.11em at 25.6% 34.2%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.06em at 89.4% 59.1%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.07em at 30.7% 29.4%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.1em at 60.6% 61.7%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.1em at 12.7% 11.4%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.1em at 28.8% 33.3%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.08em at 20.1% 41%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.11em at 75.9% 92.4%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.05em at 80.4% 38.5%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.05em at 32.4% 27.2%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.08em at 59.6% 13.2%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.06em at 14.8% 32.9%, rgb(255 255 255 / 0.9) 40%, transparent);
  background-size: 15em 11em;
  opacity: 0.55;
}
.bgx-aurora-curtain::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: radial-gradient(ellipse 70% 100% at 45% 100%, rgb(52 227 166 / 0.18), transparent 70%);
}
.bgx-aurora-curtain-veil {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 4%;
  height: 72%;
  display: flex;
  filter: blur(0.6em);
  mix-blend-mode: screen;
  rotate: -5deg;
}
.bgx-aurora-curtain-veil span {
  flex: 1;
  margin: 0 -0.4em;
  background: linear-gradient(to top, transparent, #a6ffd9 5%, #3df0b0 14%, #1fc79a 32%, oklch(from var(--c) 0.55 0.2 calc(h + 30) / 0.75) 62%, transparent 92%);
  transform-origin: 50% 100%;
  opacity: var(--o);
  animation: bgx-aurora-curtain-fold 5s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--i) * -0.22s) infinite alternate;
}
.bgx-aurora-curtain-veil span:nth-child(1) { --i: 0; --o: 0.53; }
.bgx-aurora-curtain-veil span:nth-child(2) { --i: 1; --o: 0.61; }
.bgx-aurora-curtain-veil span:nth-child(3) { --i: 2; --o: 0.63; }
.bgx-aurora-curtain-veil span:nth-child(4) { --i: 3; --o: 0.6; }
.bgx-aurora-curtain-veil span:nth-child(5) { --i: 4; --o: 0.57; }
.bgx-aurora-curtain-veil span:nth-child(6) { --i: 5; --o: 0.6; }
.bgx-aurora-curtain-veil span:nth-child(7) { --i: 6; --o: 0.72; }
.bgx-aurora-curtain-veil span:nth-child(8) { --i: 7; --o: 0.87; }
.bgx-aurora-curtain-veil span:nth-child(9) { --i: 8; --o: 0.98; }
.bgx-aurora-curtain-veil span:nth-child(10) { --i: 9; --o: 0.99; }
.bgx-aurora-curtain-veil span:nth-child(11) { --i: 10; --o: 0.89; }
.bgx-aurora-curtain-veil span:nth-child(12) { --i: 11; --o: 0.74; }
.bgx-aurora-curtain-veil span:nth-child(13) { --i: 12; --o: 0.62; }
.bgx-aurora-curtain-veil span:nth-child(14) { --i: 13; --o: 0.58; }
.bgx-aurora-curtain-veil span:nth-child(15) { --i: 14; --o: 0.61; }
.bgx-aurora-curtain-veil span:nth-child(16) { --i: 15; --o: 0.64; }
.bgx-aurora-curtain-veil span:nth-child(17) { --i: 16; --o: 0.62; }
.bgx-aurora-curtain-veil span:nth-child(18) { --i: 17; --o: 0.54; }
.bgx-aurora-curtain-veil span:nth-child(19) { --i: 18; --o: 0.44; }
.bgx-aurora-curtain-veil span:nth-child(20) { --i: 19; --o: 0.39; }
.bgx-aurora-curtain-veil span:nth-child(21) { --i: 20; --o: 0.46; }
.bgx-aurora-curtain-veil span:nth-child(22) { --i: 21; --o: 0.61; }
.bgx-aurora-curtain-veil span:nth-child(23) { --i: 22; --o: 0.79; }
.bgx-aurora-curtain-veil span:nth-child(24) { --i: 23; --o: 0.9; }
.bgx-aurora-curtain-veil span:nth-child(25) { --i: 24; --o: 0.91; }
.bgx-aurora-curtain-veil span:nth-child(26) { --i: 25; --o: 0.84; }
.bgx-aurora-curtain-veil span:nth-child(27) { --i: 26; --o: 0.77; }
.bgx-aurora-curtain-veil span:nth-child(28) { --i: 27; --o: 0.74; }
.bgx-aurora-curtain-veil span:nth-child(29) { --i: 28; --o: 0.78; }
.bgx-aurora-curtain-veil span:nth-child(30) { --i: 29; --o: 0.82; }
.bgx-aurora-curtain-veil span:nth-child(31) { --i: 30; --o: 0.82; }
.bgx-aurora-curtain-veil span:nth-child(32) { --i: 31; --o: 0.72; }
.bgx-aurora-curtain-veil span:nth-child(33) { --i: 32; --o: 0.56; }
.bgx-aurora-curtain-veil span:nth-child(34) { --i: 33; --o: 0.41; }
.bgx-aurora-curtain-veil span:nth-child(35) { --i: 34; --o: 0.36; }
.bgx-aurora-curtain-veil span:nth-child(36) { --i: 35; --o: 0.41; }
.bgx-aurora-curtain-veil span:nth-child(37) { --i: 36; --o: 0.54; }
.bgx-aurora-curtain-veil span:nth-child(38) { --i: 37; --o: 0.66; }
.bgx-aurora-curtain-veil span:nth-child(39) { --i: 38; --o: 0.72; }
.bgx-aurora-curtain-veil span:nth-child(40) { --i: 39; --o: 0.71; }
@keyframes bgx-aurora-curtain-fold {
  from { transform: translateY(-16%) scaleY(0.78); }
  to   { transform: translateY(10%) scaleY(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .bgx-aurora-curtain, .bgx-aurora-curtain::before, .bgx-aurora-curtain::after, .bgx-aurora-curtain *, .bgx-aurora-curtain *::before, .bgx-aurora-curtain *::after { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-aurora-curtain, .bgx-aurora-curtain *, .bgx-aurora-curtain::before, .bgx-aurora-curtain::after, .bgx-aurora-curtain *::before, .bgx-aurora-curtain *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --bgx-color on the element or a parent. Currently previewing #3b82f6.
Pattern scale: set --bgx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Aurora Curtain Background

HTML

CSS

Customizing this snippet

Similar animated backgrounds