Hyperbridge's rainbow scanlines

Open app.hyperbridge.network with Testnet selected and the bridge panel floats over a field of thin, evenly-spaced horizontal lines that glow through a full rainbow - gold at the top, magenta in the middle, blue and green at the bottom - fading to black where the panel sits and again at the edges of the screen. It looks like a canvas shader or a hundred hand-placed gradients. It is neither. The whole thing is two CSS gradients stacked on top of each other, and there is no JavaScript and no animation involved at all.

I pulled the live page apart layer by layer. Underneath the polish, the trick is almost insultingly simple - and it generalises to any "scanline" background you might want.

One vertical rainbow you can't see yet

Forget the lines for a second. The colour comes from a single, ordinary vertical gradient - paint a box top to bottom through five stops and you have the entire spectrum. Hyperbridge tucks this onto a pseudo-element, but a plain div works just as well:

.rainbow {
  /* no angle = top to bottom */
  background-image: linear-gradient(
    #ffb83d 8%,   /* gold   */
    #e7ff30 36%,  /* lime   */
    #ff00d4 59%,  /* magenta*/
    #5126ff 80%,  /* indigo */
    #00ff98       /* green  */
  );
}

On its own that's just a smooth wash of colour. The magic is entirely in what we put over it.

Slice it into lines with a repeating gradient

Stack a second layer on top: solid dark bands with a 1 pixel transparent slit punched through every 12 pixels. A repeating-linear-gradient does exactly this, tiling a tiny 12px pattern down the whole box - think of it as lowering a set of venetian blinds. Everywhere the band is opaque you see black; the thin gaps let the rainbow underneath show through as a glowing line.

.blinds {
  background-image: repeating-linear-gradient(
    transparent,            /* the 1px slit... */
    transparent 1px,
    #0b0b10 1px,            /* ...then 11px of solid dark */
    #0b0b10 12px
  );
}

That's the entire core of the effect: a vertical rainbow + a horizontal stripe mask = rainbow scanlines. Because the rainbow runs top to bottom, each slit lands at a slightly different colour, so the lines walk through the spectrum on their own. Hit the toggle in the demo above to lift the blinds and see the continuous gradient hiding behind them.

Mirror the two halves

Look closely at the real page and the left and right sides are vertical mirror images: gold sits at the top on the left but at the bottom on the right. Hyperbridge gets this with two pseudo-elements - a ::before covering the left half and an ::after covering the right, each carrying the same five stops in reversed order. Two side-by-side divs do the same job:

/* left half */
linear-gradient(#ffb83d 8%, #e7ff30 36%, #ff00d4 59%, #5126ff 80%, #00ff98)

/* right half - same stops, flipped */
linear-gradient(#00ff98 8%, #5126ff 36%, #ff00d4 59%, #e7ff30 80%, #ffb83d)

The blinds layer spans both halves unchanged - it doesn't care what's underneath it.

Fade the ends so content can breathe

Right now the lines run edge to edge at full strength, which would fight the bridge panel for attention. The fix is a horizontal mask-image on the colour layer: opaque where we want the lines bright, transparent where they should melt into the background. Make it transparent at the seam (50%) and at both outer edges, and each half lights up brightest around its own centre - exactly the soft pools of colour on either side of the panel.

.rainbow {
  /* a luminance window: dark = hidden, bright = visible */
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 22%,
    transparent 50%,  /* the seam, behind the panel */
    #000 78%,
    transparent       /* the outer edge */
  );
}

Where the mask is transparent the colour vanishes, the slits reveal only the dark page behind, and the lines fade to nothing - no extra elements required.

What Hyperbridge adds on top

The four layers above are the whole illusion. The production version then dusts on two finishing touches for depth, both purely decorative:

A pair of soft grey gradients (soft-linear-overlay), scaled up ~2.4× and skewed with a matrix() transform, then run through a heavy feGaussianBlur (≈28px). They add a faint slanted sheen so the lines read as if they're angling away in perspective. And a single blurred SVG path - a dark angular wedge - sits over the centre as a vignette, deepening the black exactly where the panel lands. Both are blurred dark shapes; remove them and the effect still reads, which is the tell that they're polish, not structure.

So the next time a background looks like it needed WebGL, check whether it's really just a gradient wearing a striped mask. A continuous fill plus a repeating slit is a tiny, GPU-cheap, zero-JavaScript pattern - and it works for animated barcode shimmers, CRT scanlines, equalizer bars, or, here, a rainbow that quietly holds up an entire bridge UI.