Zigzag background pattern

A repeating zigzag (chevron) pattern made from four linear-gradients.

background
pattern
zigzag
chevron
linear-gradient

Zigzag color#6b46ff

Background#12151c

Size24px

HTML

<div class="zigzag"></div>

CSS

:root {
    --c: #6b46ff;
    --bg: #12151c;
    --size: 24px;
}

.zigzag {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    background-color: var(--bg);
    background-image:
        linear-gradient(135deg, var(--c) 25%, transparent 25%),
        linear-gradient(225deg, var(--c) 25%, transparent 25%),
        linear-gradient(45deg, var(--c) 25%, transparent 25%),
        linear-gradient(315deg, var(--c) 25%, transparent 25%);
    background-position:
        calc(var(--size) / 2) 0,
        calc(var(--size) / 2) 0,
        0 0,
        0 0;
    background-size: var(--size) var(--size);
}

How it works

Four diagonal linear-gradients, each filling a quarter-tile triangle at a different 45° angle, interlock into a zigzag. Two are shifted by half a tile via background-position, so the triangles meet point-to-point and form the chevron rows.

It looks complex but it’s pure CSS and tiles forever. Change --size for the zigzag scale and the two colors to theme it; rotate the whole element for vertical zigzags.