Animated Grid Background

<div class="animated-grid-bg">

  <div class="grid-content">
    <span>Animated Grid</span>
    <h2>Structured Motion for Modern Interfaces</h2>
    <p>Pure CSS grid animation.</p>
  </div>

</div>

.animated-grid-bg{
  position:relative;
  min-height:320px;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#050914;

  background-image:
    linear-gradient(
      rgba(34,211,238,.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(34,211,238,.12) 1px,
      transparent 1px
    );

  background-size:40px 40px;

  animation:gridMove 8s linear infinite;
}

.animated-grid-bg::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at center,
      rgba(139,92,246,.16),
      transparent 55%
    );

  pointer-events:none;
}

.grid-content{
  position:relative;
  z-index:2;

  max-width:600px;
  padding:30px;

  text-align:center;
}

.grid-content span{
  display:inline-block;
  margin-bottom:12px;

  color:#22d3ee;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.grid-content h2{
  margin:0 0 12px;

  color:#ffffff;
  font-size:32px;
  line-height:1.2;
}

.grid-content p{
  margin:0;

  color:#c7d2e5;
  font-size:15px;
}

@keyframes gridMove{

  from{
    background-position:0 0;
  }

  to{
    background-position:40px 40px;
  }

}

How This Animated Grid Background Works

The Animated Grid Background creates a dark section with a cyan grid that moves continuously across the surface. A soft purple radial glow sits behind the centered content to break up the regular grid pattern. The component is built entirely with HTML and CSS, and the published version contains no JavaScript.

The HTML structure is minimal. A single .animated-grid-bg wrapper contains .grid-content, which holds the small “Animated Grid” label, heading, and paragraph. The grid itself does not require individual HTML elements because its horizontal and vertical lines are generated through CSS background gradients.

The main .animated-grid-bg container uses #050914 as its base color. Two linear-gradient() layers create the grid. The first uses rgba(34,211,238,.12) for the first 1px and then becomes transparent. Without an angle specified, this produces the horizontal part of the grid.

The second gradient uses the same cyan color and 1px thickness but is rotated to 90deg, producing the vertical lines. When both background layers are rendered together, they intersect to form square cells. The pattern uses background-size: 40px 40px, so the grid repeats at 40-pixel intervals in both directions.

Instead of moving a separate grid element, the component animates the background position directly. The gridMove keyframes begin at background-position: 0 0 and finish at 40px 40px. This matches the dimensions of one complete grid tile, allowing the repeating background to cycle continuously. For more information about this property, see the MDN background-position documentation.

The grid animation lasts eight seconds, uses linear timing, and repeats infinitely. Linear timing is useful here because the background maintains a constant movement rate throughout each cycle instead of speeding up or slowing down.

A .animated-grid-bg::before pseudo-element adds another visual layer. It is positioned absolutely with inset: 0, making it cover the full section. Its background is a centered radial gradient that begins with purple rgba(139,92,246,.16) and fades to transparent at 55%. This glow stays static while the cyan grid moves underneath it.

The pseudo-element uses pointer-events: none, so it cannot block interactions with content placed inside the background. The actual .grid-content block uses position: relative and z-index: 2, keeping the text above the decorative layers.

The content area has a maximum width of 600px, 30px of padding, and centered text. The small uppercase label uses cyan #22d3ee, a 12px font size, 800 font weight, and 1.5px letter spacing. The heading is white at 32px, while the paragraph is 15px and uses #c7d2e5.

Finally, the main container has a minimum height of 320px and uses flexbox with align-items: center and justify-content: center, keeping the content centered vertically and horizontally.

Customizing the Animated Grid Background

The existing CSS makes it straightforward to adjust the grid’s appearance, movement, glow, and overall dimensions.

• Replace #050914 to use a different base background color.
• Change rgba(34,211,238,.12) to adjust the grid line color or transparency.
• Modify the 1px gradient stops to make the horizontal and vertical grid lines thicker or thinner.
• Change background-size: 40px 40px to create larger or smaller grid cells.
• Adjust the final background-position: 40px 40px together with the grid size to change the repeating movement cycle.
• Change the 8s animation duration to make the grid move faster or slower.
• Modify rgba(139,92,246,.16) to give the central glow another color or intensity.
• Adjust the 55% radial-gradient stop to control how widely the central glow spreads.

Where to Use This Animated Grid Background

The regular grid and constant movement make this component particularly suitable for interfaces with technical or structured visual themes.

• Developer and programming website hero sections.
• SaaS and software product landing pages.
• API, cloud, infrastructure, or developer-tool pages.
• Developer portfolio introductions and project headers.
• Technology-focused call-to-action sections.
• Dashboard or analytics product presentation sections.
• Dark-theme banners that need subtle continuous background movement.

For a static pattern made from evenly spaced points instead of moving lines, the Dot Pattern Background is a related CodeRipple component. Animated Grid Background is better suited to sections where directional movement is useful while the page content itself remains stationary.

Frequently Asked Questions

Does the Animated Grid Background require JavaScript?

No. The published component contains no JavaScript. The grid generation, background movement, radial glow, layout, and typography are all implemented with CSS.

How is the grid created with CSS?

Two linear-gradient() layers are combined. One generates horizontal cyan lines and the other uses a 90deg angle to generate vertical lines. A 40px 40px background size repeats them into square grid cells.

What makes the grid move continuously?

The gridMove keyframes animate background-position from 0 0 to 40px 40px. Because that movement matches one full grid tile, the repeating background can loop continuously.

How fast does the grid animation run?

One animation cycle lasts eight seconds. It uses linear timing and repeats infinitely, which keeps the apparent movement at a constant speed.

The Animated Grid Background combines two repeating linear gradients, animated background positioning, and a static central glow to create a moving CSS grid without additional elements, external images, or JavaScript.