The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="stripes">
  <div class="card">
    <h1>Diagonal Stripes</h1>
    <p>repeating-linear-gradient in motion.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create an animated diagonal-stripe background with pure CSS.

Requirements:
- Full-viewport container with background-color #fff7ed.
- Use repeating-linear-gradient at 45deg: a 20px stripe of rgba(255,123,0,0.12) followed by a 20px transparent gap.
- Set background-size to 56.57px 56.57px (40px times the square root of 2) so the pattern tiles seamlessly.
- Animate background-position from 0 to 56.57px 0 over 3s, linear, infinite, so the stripes scroll without a visible jump.
- Disable the animation under prefers-reduced-motion.
- Centre a white card with a navy heading.

Return one HTML file with CSS in a <style> tag.

How to build it, step by step

1. 1

   Create the stripes with repeating-linear-gradient at 45 degrees: 20px of colour, then 20px of transparent.

2. 2

   Calculate the tile size. A 40px stripe period at 45 degrees repeats every 40 x 1.4142 = 56.57px horizontally.

3. 3

   Set background-size to that value so the browser tiles the pattern cleanly.

4. 4

   Animate background-position by exactly one tile width. Because the end frame looks identical to the start frame, the loop is seamless.

Customisation tips

• Make the stripes bolder by raising the alpha from 0.12 to 0.25.
• Reverse the direction with animation-direction: reverse.
• Use this on a progress bar: apply the same rules to the bar's fill element.

More backgrounds