<div class="moving-stripes-bg">

  <div class="stripes-content">
    <span>Moving Stripes</span>
    <h2>Clean Motion with Bold Direction</h2>
    <p>Animated diagonal stripes using pure CSS.</p>
  </div>

</div>

.moving-stripes-bg{
  position:relative;
  min-height:320px;

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

  overflow:hidden;

  background-color:#050914;

  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(34,211,238,.10) 0,
      rgba(34,211,238,.10) 18px,
      transparent 18px,
      transparent 38px
    );

  background-size:56px 56px;

  animation:stripesMove 4s linear infinite;
}

.moving-stripes-bg::before{
  content:"";

  position:absolute;
  inset:0;

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

  pointer-events:none;
}

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

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

  text-align:center;
}

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

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

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

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

.stripes-content p{
  margin:0;

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

@keyframes stripesMove{

  from{
    background-position:0 0;
  }

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

}

How This Moving Stripes Background Works

The Moving Stripes Background creates a dark section with continuously moving diagonal cyan stripes and a subtle purple glow behind the content. The effect is built entirely with HTML and CSS. Its markup contains a single .moving-stripes-bg wrapper and a .stripes-content block for the label, heading, and paragraph. The published component does not use JavaScript.

The main container begins with background-color: #050914, which provides the dark base. The stripe pattern is added through background-image using repeating-linear-gradient(). This approach generates the repeated lines directly in CSS, so the component does not need a texture image, SVG, or extra HTML elements for individual stripes.

The repeating gradient is set to 135deg, producing diagonal lines. Cyan rgba(34,211,238,.10) fills the range from 0 to 18px. At 18px, the gradient switches to transparent and remains transparent until 38px. Repeating these color stops produces alternating cyan and transparent bands across the section.

The pattern also uses background-size: 56px 56px. This value is especially important because the animation moves the background by exactly 56px on both axes. The stripesMove keyframes start at background-position: 0 0 and finish at background-position: 56px 56px. Since the pattern repeats, moving by one background-size unit allows the animation to cycle continuously.

The animation lasts four seconds, uses linear timing, and repeats infinitely. Linear timing keeps the background moving at a constant speed rather than accelerating or slowing near the beginning and end of each cycle. For more information about controlling the position of CSS background images, see the MDN background-position documentation.

A second visual layer is added with .moving-stripes-bg::before. The pseudo-element uses absolute positioning with inset: 0, so it covers the complete container. Its background is a centered radial-gradient() that begins with purple rgba(139,92,246,.16) and fades to transparent at 58%. Unlike the stripe pattern, this purple glow is not animated.

The pseudo-element also has pointer-events: none, ensuring the decorative glow cannot interfere with interactive HTML that may be placed inside the section. Meanwhile, the parent uses overflow: hidden to keep all visual layers inside its boundaries.

Content remains clearly above the pattern through .stripes-content, which uses position: relative and z-index: 2. The block has a maximum width of 600px, 30px of padding, and centered text. The small uppercase label is cyan at 12px, the main heading is white at 32px, and the supporting paragraph uses 15px text with the softer #c7d2e5 color.

Flexbox on the main container uses align-items: center and justify-content: center, keeping this content centered within the section’s minimum height of 320px.

Customizing the Moving Stripes Background

The component can be adjusted through its existing pattern dimensions, colors, animation timing, and content styles.

• Replace #050914 to use a different base background color.
• Change rgba(34,211,238,.10) to give the diagonal stripes another color or opacity.
• Modify the 135deg gradient angle to change the direction of the stripes.
• Adjust the 18px and 38px stops to change the width and spacing of the colored bands.
• Change background-size: 56px 56px to alter the scale of the repeating pattern.
• Adjust the final background-position: 56px 56px value together with the pattern size to change how the repeating movement cycles.
• Change the 4s animation duration to make the stripes move faster or slower.
• Modify rgba(139,92,246,.16) or the 58% fade point to adjust the color, intensity, or spread of the centered radial glow.

Where to Use This Moving Stripes Background

The consistent directional motion works well for sections that need a visible animated pattern without introducing complex scripting or graphical assets.

• Technology and developer website hero sections.
• SaaS landing-page banners with centered content.
• Product or feature announcement sections.
• Developer portfolio headers and project introductions.
• Call-to-action blocks that need subtle continuous movement.
• Loading or status-themed presentation sections where directional motion fits the design.
• Dark website sections that need more structure than a solid background.

For a softer effect based on diffused light instead of repeating lines, the Radial Glow Background is a related CodeRipple component. Moving Stripes Background keeps its animation especially simple because CSS changes only the position of the repeating background pattern.

Frequently Asked Questions

Does the Moving Stripes Background require JavaScript?

No. The published component contains no JavaScript. The stripe pattern, continuous movement, radial glow, layout, and typography are all handled with CSS.

How are the diagonal stripes created?

The component uses repeating-linear-gradient() at 135deg. Semi-transparent cyan occupies part of each repeated section, while the remaining area is transparent, producing alternating diagonal bands over the dark base.

What makes the stripes move continuously?

The stripesMove animation changes background-position from 0 0 to 56px 56px. Because the pattern itself uses a 56px 56px background size and repeats, the animation can loop without needing to move individual HTML elements.

How fast does the stripe animation run?

The animation completes one cycle every four seconds. It uses linear timing and repeats infinitely, keeping the apparent stripe movement at a constant speed.

The Moving Stripes Background combines a repeating diagonal gradient, animated background positioning, and a static central glow to create continuous CSS motion without JavaScript or external image assets.