Background Glow

Props

Usage

<BackgroundGlow tolerance={0.6}>
  <Card>
    <p>the surface lights under the pointer</p>
  </Card>
</BackgroundGlow>

Two layers

The glow is a radial gradient on a pseudo-element behind the content, and a second pseudo-element carries a tile of fractal noise blended over it. Both share the same fade, so they appear and disappear together.

.margo-background-glow::before  /* the radial gradient */
.margo-background-glow::after   /* the noise, in overlay */

The noise is not decoration. A wide, low-contrast gradient is quantised to eight bits per channel and lands on visible concentric bands; the noise breaks the boundary between one step and the next, and the eye reads a smooth ramp. Keep noise low — past roughly 0.08 it stops correcting and starts reading as grain.

Sizing and placement

As in BorderGlow, tolerance expresses the radius as a fraction of the longest side, so the effect scales with the element instead of being tuned per size.

The gradient is clipped to the element, since it is drawn on a pseudo-element with inset: 0. To let it spread past an edge, give the element itself more room — on this site the sidebar bleeds to the viewport edge with margo-col-start-full for exactly that reason.

Choosing between the two

BorderGlow draws attention to a boundary and reads as an outline; BackgroundGlow warms a surface and reads as depth. They compose — nothing prevents an element from carrying both — but on a small control that usually amounts to two competing highlights, so pick the one that matches what the element is: an edge, or a plane.