Cross-hatch Pattern

Quick implementation

.cross-hatch {
  background-color: oklch(0.15 0.02 260);
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 10px, oklch(0.62 0.23 25 / 0.1) 10px, oklch(0.62 0.23 25 / 0.1) 11px),
    repeating-linear-gradient(-45deg, transparent, transparent 10px, oklch(0.62 0.23 25 / 0.1) 10px, oklch(0.62 0.23 25 / 0.1) 11px);
}

Prompt this to your LLM

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

Act as a CSS expert. Generate a cross-hatch background pattern using only CSS. Requirements:
1. Use two repeating-linear-gradient layers.
2. Angles must be 45deg and -45deg.
3. Use transparent background with thin colored lines (low opacity).
4. Provide a vanilla CSS version and a Tailwind CSS utility class version.
5. Ensure the pattern repeats seamlessly.
6. Use oklch() for colors to ensure modern color space support.
7. Do not use SVG or images.

Why this matters in 2026

Using native CSS gradients for patterns eliminates the need for heavy SVG or raster image assets, significantly reducing page weight and improving load times. This technique leverages the browser's rendering engine to draw vector-like graphics on the fly, ensuring crisp visuals at any resolution without the maintenance overhead of managing image files.

The logic

The effect is achieved by layering two repeating-linear-gradient backgrounds. One gradient runs at 45 degrees and the other at -45 degrees. By setting the gradient stops to be transparent for most of the distance and then a thin line of color for a single pixel (or small percentage), we create the grid lines. The browser composites these two layers over the base background color to form the cross-hatch.

Accessibility & performance

Performance is excellent as this relies on GPU-accelerated gradient rendering rather than DOM elements or image decoding. For accessibility, ensure the contrast between the pattern lines and the background text is sufficient; using low-opacity lines (e.g., oklch(... / 0.1)) helps maintain readability while still providing visual texture.