Building the mercury atmosphere

Every lqdb surface keeps a graphite bar pinned above it while the page scrolls beneath it. The atmosphere behind the content looks like liquid metal. It is not. There is no canvas, no shader, no requestAnimationFrame — just layered radial gradients over a near-black base.

The recipe

background-image:
  radial-gradient(
    ellipse 120% 80% at 50% 0%,
    #1a1a1f 0%,
    #111114 40%,
    #0c0c0f 70%,
    #09090b 100%
  );

One ellipse anchored above the viewport does most of the work. Because the gradient is attached to a fixed layer while content scrolls over it, the eye reads motion into a completely static image — the same trick a photograph of mercury uses.

Rules the atmosphere follows

• It never scrolls. Parallax is a special effect; drift is a material property. The backdrop is fixed so scrolling feels like moving past a surface, not through fog.
• It never animates. Ambient motion belongs to the main mirror on lqdb.pl. This fallback stays still, which also makes it free.
• It stays out of the contrast budget. Peak luminance in the glow is around #1a1a1f, far below any text that sits on top of it. Accessibility lives in the text layers, never in the backdrop.

When it is not enough

The full mirror — the one that actually flows — is GPU territory, and it is being distilled separately as Mercury. The CSS atmosphere remains the canonical fallback: identical framing, zero runtime cost, and it renders on anything that can draw a rectangle.