Grid Beams Background: CSS Animated Background

Grid Beams Background

A faint grid where short beams of light shoot along the lines, down some columns and across some rows. Beams snap to the grid with round(), so they stay on the lines at any size.

Also known as: background beams css, grid lines with moving light, glowing grid background.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-grid-beams" aria-hidden="true">
  <span class="bgx-grid-beams-col" style="--x: 18%; --t: 4.6s; --d: -0.8s"></span>
  <span class="bgx-grid-beams-col" style="--x: 50%; --t: 5.4s; --d: -3.9s"></span>
  <span class="bgx-grid-beams-col" style="--x: 80%; --t: 4.2s; --d: -2.3s"></span>
  <span class="bgx-grid-beams-row" style="--y: 30%; --t: 6s; --d: -1.6s"></span>
  <span class="bgx-grid-beams-row" style="--y: 70%; --t: 5.2s; --d: -4.4s"></span>
</div>

CSS

.bgx-grid-beams {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --cell: 3em;
  --beam: color-mix(in srgb, var(--c) 35%, #fff);
  background:
    linear-gradient(color-mix(in srgb, var(--c) 16%, transparent) 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
    linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent) 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
    radial-gradient(ellipse 80% 70% at 50% 110%, color-mix(in srgb, var(--c) 22%, transparent), transparent),
    color-mix(in srgb, var(--c) 6%, #06080d);
}
.bgx-grid-beams-col,
.bgx-grid-beams-row {
  position: absolute;
}
.bgx-grid-beams-col {
  top: 0;
  bottom: 0;
  width: 1px;
  left: var(--x);
  left: round(down, var(--x), var(--cell));
}
.bgx-grid-beams-row {
  left: 0;
  right: 0;
  height: 1px;
  top: var(--y);
  top: round(down, var(--y), var(--cell));
}
.bgx-grid-beams-col::before,
.bgx-grid-beams-row::before {
  content: "";
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 0.2em var(--c)) drop-shadow(0 0 0.6em var(--c));
  animation: bgx-grid-beams-fall var(--t) cubic-bezier(0.5, 0, 0.7, 1) var(--d) infinite;
}
.bgx-grid-beams-col::before {
  background: linear-gradient(to top, var(--beam), var(--c) 0.8em, transparent 8em);
}
.bgx-grid-beams-row::before {
  background: linear-gradient(to left, var(--beam), var(--c) 0.8em, transparent 10em);
  animation-name: bgx-grid-beams-sweep;
}
@keyframes bgx-grid-beams-fall {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}
@keyframes bgx-grid-beams-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

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

Grid Beams Background

HTML

CSS

Customizing this snippet

Similar animated backgrounds