Props

Usage

<BackgroundGlow tolerance={0.6}>
  <Card>
    <p>default opacity</p>
  </Card>
</BackgroundGlow>

<BackgroundGlow tolerance={0.6} opacity={0.45}>
  <Card>
    <p>opacity 0.45</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

tolerance expresses the radius as a fraction of the element's longest side rather than a length in pixels, so the same value reads the same on a small card and on a full-width panel, and the effect scales with the element instead of being tuned per size. Values are clamped between 0 and 1.

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.

What it is for

A lit surface reads as depth: the plane comes forward under the pointer, and the content on it stays where it was. That makes it a fit for anything the eye treats as an area — a card, a panel, a section of a page — and a poor fit for a small control, where a whole warmed surface says more than a press deserves.

The effect appears on hover and on focus-within, so an element reached with the keyboard lights up as well.