Flickering Grid Background
A field of small rounded squares where random cells light up and dim at different rhythms, fading out toward the edges. Six masked layers of random cells blink in steps over a faint base grid.
Also known as: flickering grid background css, random squares background, pixel grid animation css, tile flicker background.
HTML
<div class="bgx-flickering-grid" aria-hidden="true"><span class="bgx-flickering-grid-field"><span></span><span></span><span></span><span></span><span></span><span></span></span></div>
CSS
.bgx-flickering-grid {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
}
.bgx-flickering-grid-field {
position: absolute;
inset: 0;
-webkit-mask: radial-gradient(ellipse 65% 75% at 50% 50%, #000 30%, transparent 85%);
mask: radial-gradient(ellipse 65% 75% at 50% 50%, #000 30%, transparent 85%);
}
.bgx-flickering-grid-field::before,
.bgx-flickering-grid-field span {
position: absolute;
inset: 0;
background: var(--c);
-webkit-mask: var(--m) 0 0 / var(--z) var(--z);
mask: var(--m) 0 0 / var(--z) var(--z);
}
.bgx-flickering-grid-field::before {
content: "";
--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' preserveAspectRatio='none'%3E%3Cpath d='M1.25 1.25h7.5v7.5h-7.5z'/%3E%3C/svg%3E");
--z: 1.2em;
opacity: 0.1;
}
.bgx-flickering-grid-field span {
--z: 19.2em;
animation: bgx-flickering-grid-blink var(--t) steps(1) var(--d) infinite;
}
.bgx-flickering-grid-field span:nth-child(1) { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' preserveAspectRatio='none'%3E%3Cpath d='M1.25 1.25h7.5v7.5h-7.5zM1.25 21.25h7.5v7.5h-7.5zM11.25 21.25h7.5v7.5h-7.5zM31.25 21.25h7.5v7.5h-7.5zM131.25 21.25h7.5v7.5h-7.5zM111.25 41.25h7.5v7.5h-7.5zM151.25 61.25h7.5v7.5h-7.5zM11.25 81.25h7.5v7.5h-7.5zM121.25 131.25h7.5v7.5h-7.5zM11.25 141.25h7.5v7.5h-7.5zM51.25 141.25h7.5v7.5h-7.5zM81.25 151.25h7.5v7.5h-7.5z'/%3E%3C/svg%3E"); --t: 2.4s; --d: -0.4s; }
.bgx-flickering-grid-field span:nth-child(2) { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' preserveAspectRatio='none'%3E%3Cpath d='M1.25 1.25h7.5v7.5h-7.5zM41.25 31.25h7.5v7.5h-7.5zM11.25 41.25h7.5v7.5h-7.5zM31.25 51.25h7.5v7.5h-7.5zM51.25 51.25h7.5v7.5h-7.5zM121.25 61.25h7.5v7.5h-7.5zM11.25 71.25h7.5v7.5h-7.5zM61.25 71.25h7.5v7.5h-7.5zM151.25 71.25h7.5v7.5h-7.5zM51.25 81.25h7.5v7.5h-7.5zM81.25 101.25h7.5v7.5h-7.5zM141.25 111.25h7.5v7.5h-7.5zM61.25 121.25h7.5v7.5h-7.5zM41.25 131.25h7.5v7.5h-7.5zM31.25 141.25h7.5v7.5h-7.5zM61.25 141.25h7.5v7.5h-7.5zM71.25 141.25h7.5v7.5h-7.5zM111.25 141.25h7.5v7.5h-7.5zM1.25 151.25h7.5v7.5h-7.5zM51.25 151.25h7.5v7.5h-7.5z'/%3E%3C/svg%3E"); --t: 3.1s; --d: -1.7s; }
.bgx-flickering-grid-field span:nth-child(3) { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' preserveAspectRatio='none'%3E%3Cpath d='M1.25 1.25h7.5v7.5h-7.5zM31.25 1.25h7.5v7.5h-7.5zM41.25 1.25h7.5v7.5h-7.5zM71.25 21.25h7.5v7.5h-7.5zM51.25 61.25h7.5v7.5h-7.5zM131.25 91.25h7.5v7.5h-7.5zM151.25 101.25h7.5v7.5h-7.5zM91.25 121.25h7.5v7.5h-7.5zM51.25 141.25h7.5v7.5h-7.5zM131.25 151.25h7.5v7.5h-7.5z'/%3E%3C/svg%3E"); --t: 1.9s; --d: -1.1s; }
.bgx-flickering-grid-field span:nth-child(4) { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' preserveAspectRatio='none'%3E%3Cpath d='M1.25 1.25h7.5v7.5h-7.5zM71.25 1.25h7.5v7.5h-7.5zM61.25 11.25h7.5v7.5h-7.5zM121.25 11.25h7.5v7.5h-7.5zM131.25 11.25h7.5v7.5h-7.5zM151.25 21.25h7.5v7.5h-7.5zM31.25 61.25h7.5v7.5h-7.5zM131.25 61.25h7.5v7.5h-7.5zM51.25 81.25h7.5v7.5h-7.5zM111.25 91.25h7.5v7.5h-7.5z'/%3E%3C/svg%3E"); --t: 4.3s; --d: -2.6s; }
.bgx-flickering-grid-field span:nth-child(5) { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' preserveAspectRatio='none'%3E%3Cpath d='M1.25 1.25h7.5v7.5h-7.5zM101.25 21.25h7.5v7.5h-7.5zM51.25 41.25h7.5v7.5h-7.5zM31.25 71.25h7.5v7.5h-7.5zM41.25 71.25h7.5v7.5h-7.5zM111.25 71.25h7.5v7.5h-7.5zM151.25 71.25h7.5v7.5h-7.5zM61.25 91.25h7.5v7.5h-7.5zM101.25 121.25h7.5v7.5h-7.5zM41.25 131.25h7.5v7.5h-7.5zM71.25 131.25h7.5v7.5h-7.5zM41.25 141.25h7.5v7.5h-7.5zM71.25 141.25h7.5v7.5h-7.5zM21.25 151.25h7.5v7.5h-7.5zM101.25 151.25h7.5v7.5h-7.5zM131.25 151.25h7.5v7.5h-7.5z'/%3E%3C/svg%3E"); --t: 2.7s; --d: -0.9s; }
.bgx-flickering-grid-field span:nth-child(6) { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' preserveAspectRatio='none'%3E%3Cpath d='M1.25 1.25h7.5v7.5h-7.5zM31.25 1.25h7.5v7.5h-7.5zM61.25 31.25h7.5v7.5h-7.5zM81.25 41.25h7.5v7.5h-7.5zM81.25 51.25h7.5v7.5h-7.5zM21.25 61.25h7.5v7.5h-7.5zM81.25 81.25h7.5v7.5h-7.5zM121.25 101.25h7.5v7.5h-7.5zM31.25 111.25h7.5v7.5h-7.5zM21.25 151.25h7.5v7.5h-7.5zM91.25 151.25h7.5v7.5h-7.5z'/%3E%3C/svg%3E"); --t: 3.6s; --d: -3.1s; }
@keyframes bgx-flickering-grid-blink {
0% { opacity: 0.15; }
12% { opacity: 0.6; }
25% { opacity: 0.3; }
37% { opacity: 0.85; }
50% { opacity: 0.2; }
62% { opacity: 0.5; }
75% { opacity: 0.1; }
87% { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-flickering-grid, .bgx-flickering-grid::before, .bgx-flickering-grid::after, .bgx-flickering-grid *, .bgx-flickering-grid *::before, .bgx-flickering-grid *::after { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-flickering-grid, .bgx-flickering-grid *, .bgx-flickering-grid::before, .bgx-flickering-grid::after, .bgx-flickering-grid *::before, .bgx-flickering-grid *::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.