Checkerboard Background
A checkerboard whose rows slide one square at a time, alternating directions, then settle back into a perfect board like a sliding puzzle. Two conic gradient layers, each masked to every other row.
Also known as: animated checkered background, moving checkerboard pattern css, sliding tiles background.
HTML
<div class="bgx-sliding-checkerboard" aria-hidden="true"> <span class="bgx-sliding-checkerboard-even"></span> <span class="bgx-sliding-checkerboard-odd"></span> </div>
CSS
.bgx-sliding-checkerboard {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--sq: 2em;
background: color-mix(in srgb, var(--c) 6%, #fff);
}
.bgx-sliding-checkerboard span {
position: absolute;
inset: 0 calc(var(--sq) * -2);
background: conic-gradient(color-mix(in srgb, var(--c) 80%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--c) 80%, transparent) 0 75%, transparent 0) 0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
-webkit-mask: repeating-linear-gradient(#000 0 var(--sq), transparent 0 calc(var(--sq) * 2)) 0 var(--row);
mask: repeating-linear-gradient(#000 0 var(--sq), transparent 0 calc(var(--sq) * 2)) 0 var(--row);
animation: bgx-sliding-checkerboard-slide 4s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.bgx-sliding-checkerboard-even { --row: 0; --dir: 1; }
.bgx-sliding-checkerboard-odd { --row: var(--sq); --dir: -1; }
@keyframes bgx-sliding-checkerboard-slide {
0%, 15% { transform: translateX(0); }
40%, 65% { transform: translateX(calc(var(--sq) * var(--dir))); }
90%, 100% { transform: translateX(calc(var(--sq) * 2 * var(--dir))); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-sliding-checkerboard, .bgx-sliding-checkerboard *, .bgx-sliding-checkerboard::before, .bgx-sliding-checkerboard::after, .bgx-sliding-checkerboard *::before, .bgx-sliding-checkerboard *::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.