Zigzag Chevron Background
Bold zigzag chevrons march upward like arrows on a road, a pattern drawn with four linear gradients and no images. The layer moves one tile per loop, so the march never stutters.
Also known as: chevron pattern css, zigzag background css, animated zigzag pattern.
HTML
<div class="bgx-chevron-zigzag" aria-hidden="true"></div>
CSS
.bgx-chevron-zigzag {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--tile: 3em;
background: color-mix(in srgb, var(--c) 8%, #fff);
}
.bgx-chevron-zigzag::before {
content: "";
position: absolute;
inset: 0 0 calc(var(--tile) * -1);
--z: color-mix(in srgb, var(--c) 75%, #fff);
background:
linear-gradient(135deg, var(--z) 25%, transparent 25%) calc(var(--tile) / -2) 0 / var(--tile) var(--tile),
linear-gradient(225deg, var(--z) 25%, transparent 25%) calc(var(--tile) / -2) 0 / var(--tile) var(--tile),
linear-gradient(315deg, var(--z) 25%, transparent 25%) 0 0 / var(--tile) var(--tile),
linear-gradient(45deg, var(--z) 25%, transparent 25%) 0 0 / var(--tile) var(--tile);
animation: bgx-chevron-zigzag-march 2.4s linear infinite;
}
@keyframes bgx-chevron-zigzag-march {
to { transform: translateY(calc(var(--tile) * -1)); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-chevron-zigzag, .bgx-chevron-zigzag *, .bgx-chevron-zigzag::before, .bgx-chevron-zigzag::after, .bgx-chevron-zigzag *::before, .bgx-chevron-zigzag *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.