Glass Lab — sratzel.dev

01

CURSOR_LENS

The same stack with border-radius: 50%, positioned under your pointer. Move your cursor across the stage and the lens bends whatever passes beneath it. Nothing else changed, and every knob from the playground works here too.

LENS SIZE 180pxDISPLACEMENT 60BLUR 2pxTINT 0.20 SHEEN GRAIN

HOW IT'S MADE [+]

/* the lens is the identical stack, just round and pointer-driven */
.lens {
  border-radius: 50%;
  pointer-events: none; /* never blocks the stage */
}
/* JS: one pointermove handler, transform only
   lens.style.transform =
     translate(cursorX - centerX, cursorY - centerY) */

02

REAL_CONTENT

Neon blobs make refraction easy to see, but they also make it easy to fake. Here the glass sits over an ordinary scrolling article. If the text warps at the edges, the effect is real, not baked into a background image.

ON BUILDING GLASS

Real glass does three things to the world behind it: it bends light at its edges, it scatters a little of it, and it catches highlights on its rim. Most CSS glassmorphism only does the middle one, which is why so much of it reads as a gray rectangle with blur.

EDGES SELL IT

The displacement map is strongest where the noise gradient is steepest, so the warping concentrates near the edges of the surface, exactly where a real lens distorts most. The middle stays readable. That accident of feTurbulence is what makes the whole trick believable.

Typography is the hardest test. A gradient hides small errors. A line of text does not: every glyph has a razor edge, and your eye knows precisely what it should look like. If glass survives a paragraph, it survives anything.

KEEP IT CHEAP

One displacement map, two pseudo-elements, zero JavaScript in the render loop. The browser rasterizes the noise once and the compositor does the rest. The moment you animate the filter itself, the illusion dies at fifteen frames per second.

ON BUILDING GLASS

Real glass does three things to the world behind it: it bends light at its edges, it scatters a little of it, and it catches highlights on its rim. Most CSS glassmorphism only does the middle one, which is why so much of it reads as a gray rectangle with blur.

EDGES SELL IT

The displacement map is strongest where the noise gradient is steepest, so the warping concentrates near the edges of the surface, exactly where a real lens distorts most. The middle stays readable. That accident of feTurbulence is what makes the whole trick believable.

Typography is the hardest test. A gradient hides small errors. A line of text does not: every glyph has a razor edge, and your eye knows precisely what it should look like. If glass survives a paragraph, it survives anything.

KEEP IT CHEAP

One displacement map, two pseudo-elements, zero JavaScript in the render loop. The browser rasterizes the noise once and the compositor does the rest. The moment you animate the filter itself, the illusion dies at fifteen frames per second.

HOW IT'S MADE [+]

/* the article exists twice; the track slides up by exactly one copy */
.track {
  animation: scroll 40s linear infinite;
}
@keyframes scroll {
  to { transform: translateY(-50%); }
}
/* the track has no fixed height, so -50% = one full copy = a seamless loop */

03

SEWED_GLASS

The stack is a system, not a single trick. Add one layer, a dashed seam inset from the edge, and the same glass reads as a patch sewn onto the page. Built for a handmade-brand project; the seam is just a border on one extra layer.

HOW IT'S MADE [+]

/* one extra layer: a dashed border inset from the edge */
.seam {
  position: absolute; inset: 9px; pointer-events: none;
  border: 2px dashed #FF3B00;
  border-radius: calc(1.5rem - 8px); /* follows the glass radius */
}

04

THE_MODAL

The trap that cost me hours: the glass tint is a fixed dark rgba, it only reads in light mode because it sits over a light backdrop. Put a fixed dark scrim behind a modal and the card goes dark while the text switches to dark. Invisible. The scrim must be theme-aware, never the glass.

HOW IT'S MADE [+]

/* THE FIX: the scrim adapts to the theme, the glass never does */
.scrim { background: rgba(202, 202, 210, 0.72); } /* light mode */
html.dark .scrim { background: rgba(4, 4, 7, 0.58); }

/* a fixed dark scrim makes the card dark while the text
   switches to dark. invisible. hours lost. */

05

CHROMATIC_ABERRATION

The version that never shipped. Splitting the backdrop into R, G and B and displacing each channel by a different amount gives real lens fringing, and runs the displacement three times per frame. Nine of these cards made a page lag catastrophically. One, behind a toggle, is a museum piece.

ENABLE AT YOUR OWN RISK

HOW IT'S MADE [+]

<filter id="chroma" x="-25%" y="-25%" width="150%" height="150%">
  <!-- isolate each channel, displace each by a different amount -->
  <feColorMatrix in="SourceGraphic" values="R only" result="srcR" />
  <feDisplacementMap in="srcR" in2="soft" scale="72" result="dispR" />
  <!-- same for G (60) and B (48) ... -->
  <feBlend in="dispR" in2="dispG" mode="screen" result="rg" />
  <feBlend in="rg" in2="dispB" mode="screen" />
</filter>