AI CSS Animations

Glowing Wave Layers Background

Translucent waves stack along the bottom of a dark hero, each topped with a bright glowing crest line, drifting in opposite directions. Fill and crest are SVG wave tiles used as masks.

Also known as: wave css background, layered wave background, dark waves hero css, animated wave lines glow.

HTML

<div class="bgx-glowing-wave-layers" aria-hidden="true"><span></span><span></span><span></span><span></span></div>

CSS

.bgx-glowing-wave-layers {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(#04050b, color-mix(in srgb, var(--c) 16%, #060812));}
.bgx-glowing-wave-layers span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + var(--w));
  height: var(--h);
  background: linear-gradient(color-mix(in srgb, var(--c) var(--p), transparent) 30%, transparent 95%);
  -webkit-mask: var(--fill) 0 0 / var(--w) 100% repeat-x;
  mask: var(--fill) 0 0 / var(--w) 100% repeat-x;
  animation: bgx-glowing-wave-layers-roll var(--t) linear infinite var(--dir, normal);
}
.bgx-glowing-wave-layers span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c) 45%, #fff);
  opacity: var(--glow);
  -webkit-mask: var(--crest) 0 0 / var(--w) 100% repeat-x;
  mask: var(--crest) 0 0 / var(--w) 100% repeat-x;
}
.bgx-glowing-wave-layers span:nth-child(1) {
  --h: 62%; --w: 26em; --t: 26s; --glow: 0.45; --p: 18%; --dir: reverse;
  --fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath d='M0 48.46L5 50.76L10 52.68L15 54.17L20 55.21L25 55.78L30 55.9L35 55.6L40 54.92L45 53.94L50 52.72L55 51.34L60 49.88L65 48.41L70 46.97L75 45.63L80 44.4L85 43.31L90 42.34L95 41.48L100 40.7L105 39.96L110 39.22L115 38.43L120 37.56L125 36.58L130 35.47L135 34.23L140 32.87L145 31.43L150 29.95L155 28.5L160 27.13L165 25.94L170 24.99L175 24.35L180 24.09L185 24.26L190 24.88L195 25.97L200 27.52L205 29.48L210 31.81L215 34.43L220 37.25L225 40.16L230 43.07L235 45.87L240 48.46L240 100L0 100Z'/%3E%3C/svg%3E");
  --crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cpath d='M0 48.46L5 50.76L10 52.68L15 54.17L20 55.21L25 55.78L30 55.9L35 55.6L40 54.92L45 53.94L50 52.72L55 51.34L60 49.88L65 48.41L70 46.97L75 45.63L80 44.4L85 43.31L90 42.34L95 41.48L100 40.7L105 39.96L110 39.22L115 38.43L120 37.56L125 36.58L130 35.47L135 34.23L140 32.87L145 31.43L150 29.95L155 28.5L160 27.13L165 25.94L170 24.99L175 24.35L180 24.09L185 24.26L190 24.88L195 25.97L200 27.52L205 29.48L210 31.81L215 34.43L220 37.25L225 40.16L230 43.07L235 45.87L240 48.46' fill='none' stroke='%23000' stroke-opacity='0.7' stroke-width='6' filter='url(%23b)'/%3E%3Cpath d='M0 48.46L5 50.76L10 52.68L15 54.17L20 55.21L25 55.78L30 55.9L35 55.6L40 54.92L45 53.94L50 52.72L55 51.34L60 49.88L65 48.41L70 46.97L75 45.63L80 44.4L85 43.31L90 42.34L95 41.48L100 40.7L105 39.96L110 39.22L115 38.43L120 37.56L125 36.58L130 35.47L135 34.23L140 32.87L145 31.43L150 29.95L155 28.5L160 27.13L165 25.94L170 24.99L175 24.35L180 24.09L185 24.26L190 24.88L195 25.97L200 27.52L205 29.48L210 31.81L215 34.43L220 37.25L225 40.16L230 43.07L235 45.87L240 48.46' fill='none' stroke='%23000' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.bgx-glowing-wave-layers span:nth-child(2) {
  --h: 50%; --w: 22em; --t: 18s; --glow: 0.6; --p: 22%; --dir: normal;
  --fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50.07L5 48.99L10 47.84L15 46.68L20 45.55L25 44.49L30 43.52L35 42.65L40 41.89L45 41.21L50 40.59L55 40.01L60 39.43L65 38.81L70 38.13L75 37.37L80 36.5L85 35.54L90 34.47L95 33.35L100 32.19L105 31.04L110 29.96L115 29.01L120 28.25L125 27.73L130 27.5L135 27.61L140 28.08L145 28.91L150 30.1L155 31.62L160 33.43L165 35.48L170 37.68L175 39.97L180 42.26L185 44.47L190 46.52L195 48.34L200 49.87L205 51.06L210 51.91L215 52.38L220 52.5L225 52.28L230 51.77L235 51.01L240 50.07L240 100L0 100Z'/%3E%3C/svg%3E");
  --crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cpath d='M0 50.07L5 48.99L10 47.84L15 46.68L20 45.55L25 44.49L30 43.52L35 42.65L40 41.89L45 41.21L50 40.59L55 40.01L60 39.43L65 38.81L70 38.13L75 37.37L80 36.5L85 35.54L90 34.47L95 33.35L100 32.19L105 31.04L110 29.96L115 29.01L120 28.25L125 27.73L130 27.5L135 27.61L140 28.08L145 28.91L150 30.1L155 31.62L160 33.43L165 35.48L170 37.68L175 39.97L180 42.26L185 44.47L190 46.52L195 48.34L200 49.87L205 51.06L210 51.91L215 52.38L220 52.5L225 52.28L230 51.77L235 51.01L240 50.07' fill='none' stroke='%23000' stroke-opacity='0.7' stroke-width='6' filter='url(%23b)'/%3E%3Cpath d='M0 50.07L5 48.99L10 47.84L15 46.68L20 45.55L25 44.49L30 43.52L35 42.65L40 41.89L45 41.21L50 40.59L55 40.01L60 39.43L65 38.81L70 38.13L75 37.37L80 36.5L85 35.54L90 34.47L95 33.35L100 32.19L105 31.04L110 29.96L115 29.01L120 28.25L125 27.73L130 27.5L135 27.61L140 28.08L145 28.91L150 30.1L155 31.62L160 33.43L165 35.48L170 37.68L175 39.97L180 42.26L185 44.47L190 46.52L195 48.34L200 49.87L205 51.06L210 51.91L215 52.38L220 52.5L225 52.28L230 51.77L235 51.01L240 50.07' fill='none' stroke='%23000' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.bgx-glowing-wave-layers span:nth-child(3) {
  --h: 38%; --w: 30em; --t: 22s; --glow: 0.8; --p: 28%; --dir: reverse;
  --fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath d='M0 40.15L5 39.68L10 39.19L15 38.65L20 38.05L25 37.36L30 36.6L35 35.75L40 34.84L45 33.9L50 32.95L55 32.05L60 31.23L65 30.56L70 30.07L75 29.81L80 29.81L85 30.1L90 30.69L95 31.57L100 32.74L105 34.15L110 35.77L115 37.54L120 39.4L125 41.28L130 43.12L135 44.84L140 46.39L145 47.72L150 48.78L155 49.56L160 50.04L165 50.23L170 50.13L175 49.78L180 49.22L185 48.48L190 47.63L195 46.71L200 45.76L205 44.82L210 43.93L215 43.11L220 42.38L225 41.73L230 41.15L235 40.63L240 40.15L240 100L0 100Z'/%3E%3C/svg%3E");
  --crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cpath d='M0 40.15L5 39.68L10 39.19L15 38.65L20 38.05L25 37.36L30 36.6L35 35.75L40 34.84L45 33.9L50 32.95L55 32.05L60 31.23L65 30.56L70 30.07L75 29.81L80 29.81L85 30.1L90 30.69L95 31.57L100 32.74L105 34.15L110 35.77L115 37.54L120 39.4L125 41.28L130 43.12L135 44.84L140 46.39L145 47.72L150 48.78L155 49.56L160 50.04L165 50.23L170 50.13L175 49.78L180 49.22L185 48.48L190 47.63L195 46.71L200 45.76L205 44.82L210 43.93L215 43.11L220 42.38L225 41.73L230 41.15L235 40.63L240 40.15' fill='none' stroke='%23000' stroke-opacity='0.7' stroke-width='6' filter='url(%23b)'/%3E%3Cpath d='M0 40.15L5 39.68L10 39.19L15 38.65L20 38.05L25 37.36L30 36.6L35 35.75L40 34.84L45 33.9L50 32.95L55 32.05L60 31.23L65 30.56L70 30.07L75 29.81L80 29.81L85 30.1L90 30.69L95 31.57L100 32.74L105 34.15L110 35.77L115 37.54L120 39.4L125 41.28L130 43.12L135 44.84L140 46.39L145 47.72L150 48.78L155 49.56L160 50.04L165 50.23L170 50.13L175 49.78L180 49.22L185 48.48L190 47.63L195 46.71L200 45.76L205 44.82L210 43.93L215 43.11L220 42.38L225 41.73L230 41.15L235 40.63L240 40.15' fill='none' stroke='%23000' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.bgx-glowing-wave-layers span:nth-child(4) {
  --h: 26%; --w: 20em; --t: 14s; --glow: 1; --p: 36%; --dir: normal;
  --fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath d='M0 33.51L5 32.92L10 32.46L15 32.16L20 32.04L25 32.15L30 32.48L35 33.04L40 33.84L45 34.83L50 36.01L55 37.33L60 38.75L65 40.21L70 41.66L75 43.05L80 44.34L85 45.47L90 46.41L95 47.14L100 47.64L105 47.9L110 47.94L115 47.78L120 47.42L125 46.92L130 46.3L135 45.61L140 44.88L145 44.14L150 43.43L155 42.76L160 42.15L165 41.61L170 41.13L175 40.7L180 40.32L185 39.95L190 39.58L195 39.18L200 38.74L205 38.24L210 37.68L215 37.06L220 36.38L225 35.65L230 34.91L235 34.19L240 33.51L240 100L0 100Z'/%3E%3C/svg%3E");
  --crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cpath d='M0 33.51L5 32.92L10 32.46L15 32.16L20 32.04L25 32.15L30 32.48L35 33.04L40 33.84L45 34.83L50 36.01L55 37.33L60 38.75L65 40.21L70 41.66L75 43.05L80 44.34L85 45.47L90 46.41L95 47.14L100 47.64L105 47.9L110 47.94L115 47.78L120 47.42L125 46.92L130 46.3L135 45.61L140 44.88L145 44.14L150 43.43L155 42.76L160 42.15L165 41.61L170 41.13L175 40.7L180 40.32L185 39.95L190 39.58L195 39.18L200 38.74L205 38.24L210 37.68L215 37.06L220 36.38L225 35.65L230 34.91L235 34.19L240 33.51' fill='none' stroke='%23000' stroke-opacity='0.7' stroke-width='6' filter='url(%23b)'/%3E%3Cpath d='M0 33.51L5 32.92L10 32.46L15 32.16L20 32.04L25 32.15L30 32.48L35 33.04L40 33.84L45 34.83L50 36.01L55 37.33L60 38.75L65 40.21L70 41.66L75 43.05L80 44.34L85 45.47L90 46.41L95 47.14L100 47.64L105 47.9L110 47.94L115 47.78L120 47.42L125 46.92L130 46.3L135 45.61L140 44.88L145 44.14L150 43.43L155 42.76L160 42.15L165 41.61L170 41.13L175 40.7L180 40.32L185 39.95L190 39.58L195 39.18L200 38.74L205 38.24L210 37.68L215 37.06L220 36.38L225 35.65L230 34.91L235 34.19L240 33.51' fill='none' stroke='%23000' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
@keyframes bgx-glowing-wave-layers-roll {
  to { transform: translateX(calc(var(--w) * -1)); }
}
@media (prefers-reduced-motion: reduce) {
  .bgx-glowing-wave-layers, .bgx-glowing-wave-layers::before, .bgx-glowing-wave-layers::after, .bgx-glowing-wave-layers *, .bgx-glowing-wave-layers *::before, .bgx-glowing-wave-layers *::after { animation-play-state: paused; }
}

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

Similar animated backgrounds

Wave Background
Ripple Background
Wave Lines Background
Wavy Lines Background