Wave Lines Background: CSS Animated Background

Wave Lines Background

Five glowing sine waves in neighboring hues slide past each other and swell, tapering off at the sides like an audio visualizer. Each wave is a stroked SVG tile, masked and moved one period per loop.

Also known as: animated lines background css, sine wave animation css, flowing lines background.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-wave-lines" aria-hidden="true">
  <span class="bgx-wave-lines-set"><span></span><span></span><span></span><span></span><span></span></span>
</div>

CSS

.bgx-wave-lines {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --sine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50Q100 -38 200 50T400 50' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--c) 7%, #05060b);
}
.bgx-wave-lines-set {
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 25% 75%, transparent);
  mask: linear-gradient(90deg, transparent, #000 25% 75%, transparent);
}
.bgx-wave-lines-set span {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(100% + var(--p));
  height: calc(var(--p) / 4);
  margin-top: calc(var(--p) / -8);
  background: oklch(from var(--c) calc(l + 0.08) c calc(h + var(--h)));
  -webkit-mask: var(--sine) 0 0 / var(--p) 100% repeat-x;
  mask: var(--sine) 0 0 / var(--p) 100% repeat-x;
  mix-blend-mode: screen;
  animation:
    bgx-wave-lines-flow var(--t) linear infinite var(--dir, normal),
    bgx-wave-lines-swell calc(var(--t) * 0.6) ease-in-out infinite alternate;
}
.bgx-wave-lines-set span:nth-child(1) { --p: 28em; --t: 7s; --h: 0; }
.bgx-wave-lines-set span:nth-child(2) { --p: 22em; --t: 5s; --h: 40; --dir: reverse; }
.bgx-wave-lines-set span:nth-child(3) { --p: 34em; --t: 9s; --h: -40; }
.bgx-wave-lines-set span:nth-child(4) { --p: 18em; --t: 6s; --h: 80; --dir: reverse; }
.bgx-wave-lines-set span:nth-child(5) { --p: 40em; --t: 11s; --h: 20; }
@keyframes bgx-wave-lines-flow {
  to { transform: translateX(calc(var(--p) * -1)); }
}
@keyframes bgx-wave-lines-swell {
  from { scale: 1 0.55; }
  to   { scale: 1 1; }
}

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

Wave Lines Background

HTML

CSS

Customizing this snippet

Similar animated backgrounds