Crosshatch background pattern

A diagonal crosshatch of thin lines from two repeating-linear-gradients.

background
pattern
crosshatch
lines
gradient

Line color#6b46ff

Background#12151c

Spacing18px

HTML

<div class="crosshatch"></div>

CSS

:root {
    --line: #6b46ff;
    --bg: #12151c;
    --gap: 18px;
}

.crosshatch {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    background-color: var(--bg);
    background-image:
        repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px var(--gap)),
        repeating-linear-gradient(-45deg, var(--line) 0 1px, transparent 1px var(--gap));
}

How it works

Two repeating-linear-gradients draw thin 1px diagonal lines — one at 45deg, one at -45deg — and layering them creates the woven crosshatch:

var(--line) 0 1px is the line; transparent 1px var(--gap) is the gap before the next line repeats.
Because repeating-linear-gradient tiles itself, no background-size is needed.

Use a single direction for simple hatching, or give each direction its own color for a tartan/plaid effect.