Northern Lights Background: CSS Animated Background

Northern Lights Background

Green aurora curtains with violet tops sway above a mountain ridge on a night sky, their rays drifting sideways. Curtains only skew and slide, and the ridges are clip-path polygons.

Also known as: aurora borealis css, northern lights animation css, aurora night sky background.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-northern-lights" aria-hidden="true"><span></span><span></span><span></span><span></span></div>

CSS

.bgx-northern-lights {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(#02040b, #050d1f 45%, #0a2033 80%, #0e2a3a);
  isolation: isolate;
}
.bgx-northern-lights span:nth-child(-n + 2) {
  position: absolute;
  top: var(--top);
  bottom: var(--bottom);
  left: -25%;
  right: -25%;
  background:
    linear-gradient(90deg, transparent 0 30%, rgb(2 4 11 / 0.4) 55%, transparent 80%) 0 0 / 1.3em 100%,
    linear-gradient(90deg, transparent 0 20%, rgb(2 4 11 / 0.5) 60%, transparent) 0 0 / 3.1em 100%,
    linear-gradient(to top, transparent, var(--low) 12%, var(--mid) 38%, var(--high) 68%, transparent);
  mix-blend-mode: screen;
  opacity: var(--o);
  transform-origin: 50% 100%;
  animation:
    bgx-northern-lights-sway var(--t) ease-in-out var(--d) infinite alternate,
    bgx-northern-lights-rays 10s linear infinite;
}
.bgx-northern-lights span:nth-child(1) { --top: 4%; --bottom: 34%; --r: -7deg; --t: 7s; --d: -2s; --o: 0.9; --low: #52ffb8; --mid: #22d3a4; --high: oklch(from var(--c) 0.55 0.2 calc(h + 40)); }
.bgx-northern-lights span:nth-child(2) { --top: 14%; --bottom: 26%; --r: 9deg; --t: 9s; --d: -6s; --o: 0.7; --low: #7dffd0; --mid: oklch(from var(--c) 0.72 0.15 calc(h - 60)); --high: var(--c); }
.bgx-northern-lights span:nth-child(n + 3) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.bgx-northern-lights span:nth-child(3) {
  height: 38%;
  background: #0b1a2b;
  clip-path: polygon(0 100%, 0 46%, 9% 30%, 16% 42%, 27% 12%, 36% 36%, 44% 26%, 55% 48%, 66% 18%, 75% 38%, 84% 24%, 93% 40%, 100% 30%, 100% 100%);
}
.bgx-northern-lights span:nth-child(4) {
  height: 24%;
  background: #03070e;
  clip-path: polygon(0 100%, 0 40%, 12% 58%, 22% 30%, 31% 52%, 43% 44%, 52% 62%, 63% 34%, 72% 54%, 83% 40%, 92% 60%, 100% 46%, 100% 100%);
}
@keyframes bgx-northern-lights-sway {
  from { transform: rotate(var(--r)) translateX(-5%) skewX(-18deg) scaleY(0.9); }
  to   { transform: rotate(var(--r)) translateX(5%) skewX(16deg) scaleY(1.08); }
}
@keyframes bgx-northern-lights-rays {
  to { background-position: 2.6em 0, -3.1em 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-northern-lights, .bgx-northern-lights *, .bgx-northern-lights::before, .bgx-northern-lights::after, .bgx-northern-lights *::before, .bgx-northern-lights *::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.

Northern Lights Background

HTML

CSS

Customizing this snippet

Similar animated backgrounds