Spotlight Grid Background
A dim grid with a roaming spotlight that reveals bright lines and dots wherever it passes, no mouse tracking needed. Two registered @property percentages steer the spot on a looping path.
Also known as: grid reveal background, flashlight grid effect, grid spotlight hover effect.
HTML
<div class="bgx-spotlight-grid" aria-hidden="true"></div>
CSS
.bgx-spotlight-grid {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--cell: 2em;
--r: 9em;
--grid:
radial-gradient(circle at 0.5px 0.5px, currentColor 0.12em, transparent 0.16em) 0 0 / var(--cell) var(--cell),
linear-gradient(currentColor 0 1px, transparent 1px) 0 0 / var(--cell) var(--cell),
linear-gradient(90deg, currentColor 0 1px, transparent 1px) 0 0 / var(--cell) var(--cell);
color: color-mix(in srgb, var(--c) 14%, transparent);
background: var(--grid), color-mix(in srgb, var(--c) 6%, #050608);
}
.bgx-spotlight-grid::before {
content: "";
position: absolute;
inset: 0;
--spot: circle var(--r) at var(--bgx-spotlight-grid-x) var(--bgx-spotlight-grid-y);
color: color-mix(in srgb, var(--c) 80%, #fff);
background: radial-gradient(var(--spot), color-mix(in srgb, var(--c) 30%, transparent), transparent), var(--grid);
-webkit-mask: radial-gradient(var(--spot), #000 30%, transparent);
mask: radial-gradient(var(--spot), #000 30%, transparent);
animation:
bgx-spotlight-grid-x 6.4s cubic-bezier(0.45, 0, 0.55, 1) -2.4s infinite alternate,
bgx-spotlight-grid-y 4.1s cubic-bezier(0.45, 0, 0.55, 1) -1.6s infinite alternate;
}
@property --bgx-spotlight-grid-x {
syntax: "<percentage>";
inherits: false;
initial-value: 30%;
}
@property --bgx-spotlight-grid-y {
syntax: "<percentage>";
inherits: false;
initial-value: 40%;
}
@keyframes bgx-spotlight-grid-x {
from { --bgx-spotlight-grid-x: 12%; }
to { --bgx-spotlight-grid-x: 88%; }
}
@keyframes bgx-spotlight-grid-y {
from { --bgx-spotlight-grid-y: 18%; }
to { --bgx-spotlight-grid-y: 82%; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-spotlight-grid, .bgx-spotlight-grid *, .bgx-spotlight-grid::before, .bgx-spotlight-grid::after, .bgx-spotlight-grid *::before, .bgx-spotlight-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.