Plaid Background
A woven tartan whose warp and weft bands glide in different directions, so the checks slowly re-weave themselves, with a twill texture on top. Two striped layers multiplied together.
Also known as: tartan pattern css, plaid pattern animation, flannel check background.
HTML
<div class="bgx-tartan-plaid" aria-hidden="true"> <span class="bgx-tartan-plaid-warp"></span> <span class="bgx-tartan-plaid-weft"></span> </div>
CSS
.bgx-tartan-plaid {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--repeat: 8em;
--bands:
transparent 0 1em,
color-mix(in srgb, var(--c) 45%, transparent) 1em 3em,
transparent 3em 3.4em,
color-mix(in srgb, var(--c) 40%, #1a1a2e) 3.4em 4.4em,
transparent 4.4em 5.2em,
color-mix(in srgb, oklch(from var(--c) 0.85 0.14 calc(h + 190)) 70%, transparent) 5.2em 5.45em,
transparent 5.45em var(--repeat);
background: color-mix(in srgb, var(--c) 10%, #f7f3ea);
}
.bgx-tartan-plaid span {
position: absolute;
inset: calc(var(--repeat) * -1);
mix-blend-mode: multiply;
}
.bgx-tartan-plaid-warp {
background: repeating-linear-gradient(90deg, var(--bands));
animation: bgx-tartan-plaid-warp 12s linear infinite;
}
.bgx-tartan-plaid-weft {
background:
repeating-linear-gradient(45deg, rgb(0 0 0 / 0.07) 0 1px, transparent 1px 0.3em),
repeating-linear-gradient(0deg, var(--bands));
animation: bgx-tartan-plaid-weft 16s linear infinite;
}
@keyframes bgx-tartan-plaid-warp {
to { transform: translateX(var(--repeat)); }
}
@keyframes bgx-tartan-plaid-weft {
to { transform: translateY(var(--repeat)); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-tartan-plaid, .bgx-tartan-plaid *, .bgx-tartan-plaid::before, .bgx-tartan-plaid::after, .bgx-tartan-plaid *::before, .bgx-tartan-plaid *::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.