Repeating Pattern Background

Quick implementation

.repeating-pattern {
  background-color: var(--card);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    var(--accent) 3px,
    var(--accent) 4px
  );
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Act as a CSS expert. Generate a CSS class that creates a subtle, repeating diagonal stripe pattern background.

Requirements:
1. Use `repeating-linear-gradient` at 45 degrees.
2. Use transparent and a CSS variable (e.g., --accent) for colors.
3. The pattern should be fine (approx 4px repeat).
4. Provide two versions: one using standard CSS variables and one using Tailwind arbitrary values.
5. Ensure the background color is set to a neutral base (e.g., --card) so the transparent parts show through.

Output only the CSS code blocks.

Why this matters in 2026

Repeating gradients offer a lightweight, performant alternative to image-based textures, reducing HTTP requests and file size while maintaining visual depth. This technique is essential for modern design systems that prioritize dynamic theming, as the pattern automatically adapts to color mode changes without asset replacement.

The logic

The repeating-linear-gradient function creates a continuous pattern by defining a color stop sequence that repeats infinitely. By setting the transparent stop and the accent stop very close together (e.g., 3px and 4px), we create a thin line effect that tiles seamlessly across the element's background.

Accessibility & performance

Because this pattern is generated entirely by the browser's rendering engine, it incurs zero network overhead and scales perfectly on high-DPI displays. Ensure the contrast between the base background and the accent color meets WCAG standards if the pattern is used behind text content.