A sparkly backdrop from one div and mask-composite

jhey posted a CSS trick I had to rebuild: a whole shimmering starfield in one element, no canvas and no thousands of animated divs. Here it is:

The trick is intersecting two masks

The element itself is just a gradient. What makes it sparkle is two stacked mask layers and one underused property, mask-composite.

.canvas {
  background: var(--gradient);
  mask: var(--dots), var(--noise);
  mask-composite: intersect; /* keep only where BOTH masks show */
  animation: flicker 8s infinite;
}

mask-composite: intersect works like it does in SVG: it combines the layers and keeps only their overlap. So a pixel survives only if the dots mask and the noise mask are both opaque there.

The dots are a single repeated radial-gradient:

mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px)
      50% 50% / 40px 40px;

And the noise is a tile of Perlin noise. jhey used a generated noise.png. I skipped the image entirely and generated it inline with an SVG feTurbulence filter, so the whole thing ships as CSS:

mask: url("data:image/svg+xml,…feTurbulence…") 50% 50% / 256px 256px;

Then animate the noise

Intersect the two and you get a static scatter of dots. The last move is to animate the noise layer's position so the "bright" region drifts across the grid, lighting up different dots each frame:

@keyframes flicker {
  to { mask-position: 50% 50%, 120px 90px; }
}

The first value pins the dots; the second slides the noise. That drift is the twinkle.

Why it's nice

One element does the work of thousands. There's no per-dot DOM node, no canvas, no JS loop, so it stays cheap even across a big area, and it degrades to a calm static field under prefers-reduced-motion. Swap the gradient for your brand colors, or point the same masks at text to make words shimmer.

Recreated from jhey. Grab the component on the Sparkle Field page.