Grid Glow Sweep Background: CSS Animated Background

Grid Glow Sweep Background

A faint hairline grid where a soft band of light sweeps across every few seconds, lighting the lines and the dots at each crossing. A masked gradient band slides over a bright copy of the grid.

Also known as: grid background with glow, animated grid hero background, grid light sweep css, tech grid background css.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-grid-glow-sweep" aria-hidden="true"><span class="bgx-grid-glow-sweep-glow"></span><span class="bgx-grid-glow-sweep-lit"></span></div>

CSS

.bgx-grid-glow-sweep {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --line: color-mix(in srgb, var(--c) 18%, transparent);
  -webkit-mask: radial-gradient(ellipse 70% 80% at 50% 45%, #000 35%, transparent 90%);
  mask: radial-gradient(ellipse 70% 80% at 50% 45%, #000 35%, transparent 90%);}
.bgx-grid-glow-sweep::before,
.bgx-grid-glow-sweep-lit {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--line) 1px, transparent 0) -1px -1px / 2.5em 2.5em,
    linear-gradient(90deg, var(--line) 1px, transparent 0) -1px -1px / 2.5em 2.5em;
}
.bgx-grid-glow-sweep-lit {
  --line: color-mix(in srgb, var(--c) 80%, transparent);
  background:
    radial-gradient(circle, var(--c) 0.1em, transparent 0.14em) -1.25em -1.25em / 2.5em 2.5em,
    linear-gradient(var(--line) 1px, transparent 0) -1px -1px / 2.5em 2.5em,
    linear-gradient(90deg, var(--line) 1px, transparent 0) -1px -1px / 2.5em 2.5em;
  -webkit-mask: linear-gradient(110deg, transparent 38%, #000 50%, transparent 62%) 100% 0 / 300% 100% no-repeat;
  mask: linear-gradient(110deg, transparent 38%, #000 50%, transparent 62%) 100% 0 / 300% 100% no-repeat;
  animation: bgx-grid-glow-sweep-mask 5s cubic-bezier(0.55, 0, 0.35, 1) infinite;
}
.bgx-grid-glow-sweep-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, color-mix(in srgb, var(--c) 22%, transparent) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat;
  animation: bgx-grid-glow-sweep-band 5s cubic-bezier(0.55, 0, 0.35, 1) infinite;
}
@keyframes bgx-grid-glow-sweep-mask {
  0%        { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  70%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
@keyframes bgx-grid-glow-sweep-band {
  0%        { background-position: 100% 0; }
  70%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bgx-grid-glow-sweep, .bgx-grid-glow-sweep::before, .bgx-grid-glow-sweep::after, .bgx-grid-glow-sweep *, .bgx-grid-glow-sweep *::before, .bgx-grid-glow-sweep *::after { animation-play-state: paused; }
}

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

HTML

CSS

Customizing this snippet

Similar animated backgrounds