Dot Grid Pulse Background
A quiet dot grid where rings of brighter, larger dots pulse outward from the center, like a sonar ping across graph paper. Two masked layers of dots, animated with mask-size.
Also known as: dot grid background css, animated dots background css, dot matrix background.
HTML
<div class="bgx-dot-grid-pulse" aria-hidden="true"></div>
CSS
.bgx-dot-grid-pulse {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--gap: 1.5em;
--dots: radial-gradient(circle, var(--c) 0.2em, transparent 0.24em) 0 0 / var(--gap) var(--gap);
background:
radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent) 0.09em, transparent 0.12em) 0 0 / var(--gap) var(--gap),
color-mix(in srgb, var(--c) 4%, #fbfcfe);
}
.bgx-dot-grid-pulse::before,
.bgx-dot-grid-pulse::after {
content: "";
position: absolute;
inset: 0;
background: var(--dots);
-webkit-mask: radial-gradient(circle, transparent 20%, rgb(0 0 0 / 0.3) 32%, #000 38.5%, transparent 40%) 50% 50% / 0 0 no-repeat;
mask: radial-gradient(circle, transparent 20%, rgb(0 0 0 / 0.3) 32%, #000 38.5%, transparent 40%) 50% 50% / 0 0 no-repeat;
animation: bgx-dot-grid-pulse-ring 4s cubic-bezier(0.3, 0.2, 0.6, 1) -1.2s infinite;
}
.bgx-dot-grid-pulse::after {
animation-delay: -3.2s;
}
@keyframes bgx-dot-grid-pulse-ring {
from { -webkit-mask-size: 0 0; mask-size: 0 0; }
to { -webkit-mask-size: 320% 320%; mask-size: 320% 320%; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-dot-grid-pulse, .bgx-dot-grid-pulse *, .bgx-dot-grid-pulse::before, .bgx-dot-grid-pulse::after, .bgx-dot-grid-pulse *::before, .bgx-dot-grid-pulse *::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.