Quick implementation
.diagonal-stripes {
background: repeating-linear-gradient(
45deg,
oklch(0.35 0.08 265),
oklch(0.35 0.08 265) 10px,
oklch(0.52 0.22 265) 10px,
oklch(0.52 0.22 265) 20px
);
}
/* Alternative: 135deg for opposite diagonal */
.diagonal-stripes--opposite {
background: repeating-linear-gradient(
135deg,
oklch(0.35 0.08 265),
oklch(0.35 0.08 265) 10px,
oklch(0.52 0.22 265) 10px,
oklch(0.52 0.22 265) 20px
);
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer. Your task is to create a flexible diagonal stripe pattern component.
Role & Goal:
Build a reusable CSS diagonal stripe background that works on any container. The stripe angle should be adjustable (45deg, 135deg, etc.) with configurable stripe width and color pairs.
Technical Constraints:
1. Use repeating-linear-gradient exclusively (no SVG, no images)
2. Support at least 45deg and 135deg angle variants
3. All colors must use oklch() color space
4. Stripe width should be independently adjustable
5. Pattern must remain sharp at all zoom levels and DPI settings
Vanilla CSS implementation:
.diagonal-stripes {
background: repeating-linear-gradient(45deg, color1, color1 10px, color2 10px, color2 20px);
}
React/TypeScript variant:
Create a DiagonalStripes component that accepts angle, stripeWidth, color1, and color2 props, returning a div with computed gradient background.
Edge cases to handle:
1. Very thin stripes (1px) that may cause aliasing artifacts
2. Alternating stripe widths (asymmetric patterns)
3. Responsive stripe widths that scale with viewport or parent container
4. Combining stripes with semi-transparent overlays
5. Performance on large containers with complex gradient calculations
6. Different angle values (0deg vertical, 90deg horizontal, 45deg/135deg diagonal)Why this matters in 2026
Diagonal stripe patterns are ubiquitous in modern design for emphasis, visual interest, and accent backgrounds. Rather than embedding images or SVGs, CSS repeating-linear-gradient provides a lightweight, responsive alternative that scales infinitely without quality loss.
This technique is especially valuable for skeuomorphic designs, progress indicators, disabled states, and branded background patterns that need to respond instantly to container resizing.
The logic
repeating-linear-gradient(angle, color1, color1 Xpx, color2 Xpx, color2 2Xpx) creates a repeating gradient where each color has explicit stop positions. The angle (45deg, 135deg, etc.) determines the stripe direction. By setting two consecutive stops for each color at the same position, you create a hard edge between stripes.
The stripe width is controlled by the difference between stops. For example, if color1 stops at 10px and color2 starts at 10px and stops at 20px, you get a 10px stripe for each color. Change these values to create wider or narrower stripes.
Accessibility & performance
Diagonal stripes render as a single computed background with zero performance overhead. They don't require animation or JavaScript. Be mindful of stripe width for users with visual impairments — very thin stripes can create moiré patterns or appear to flicker. Test with @media (prefers-color-scheme: dark) to ensure sufficient contrast between stripe colors in both light and dark modes.