LifeLab · nested transclusion · pure curiosity

Liquid glass — how far can CSS push the material?

Yes, you can get most of the way to that thick, lens-like glass with CSS alone. The recipe: heavy backdrop-filter (blur + saturate + brightness), a rim-lensing trick with asymmetric inset shadows (bright top-left edge, dark bottom-right — reads as light bending through a curved edge), a convex sheen from opposing inset gradients, a 1px specular streak, and a two-part cast shadow (tight contact + wide ambient). Depth 2 is "thicker" glass: more blur, brighter rim, bigger float. Hover the sheets — they lift.

1THE MOCK

Depth 2 on liquid glass — with the light field it needs

Note what had to change to make it work: colored ambient blobs now live behind the page, because thick glass over flat cream is invisible. The material only exists if the world behind it is worth refracting. That's the deal you'd be signing.

[acl2026]· pageday week month· pages
* [[ :tag:
conference
acl2026 ⌄
:conference: :nlp:jul 5–10 · san diego
− acl2026/mellms-workshop 3 blocks · 2 subpages GLASS · 4mm
*Multilinguality in the Era of LLMs (MeLLMs)
half-day workshop (afternoon) · room: Gaslamp A&B
⋯ 2 more blocks
− session-1-morning-papers 5 blocks GLASS · 8mm · TOP
*Tokenizer transfer without retraining:paper:
swap tokenizers post-hoc via embedding projection
*Curse of multilinguality revisited at 70B:paper:
interference vanishes past a scale threshold
+ first block goes to session-1…
+ session-2-shared-task 4 blocks · :talks: subpage
*acl conference plan
goals: 3 collaborations, ask about MLP-pruning conflict
Gorgeous. Alien.the page needed a light field before the glass could exist
2THE RECIPE

Anatomy — seven layers make the lens

All standard CSS, no images, no SVG filters. Every layer is doing one optical job.

Layer stack (bottom → top)

L1backdrop-filter: blur(22–30px) saturate(1.5) brightness(1.05) — the frosting. Saturate is the secret: it makes whatever's behind glow through the glass, which is what sells "material" over "gray box".
L2two background gradients — a radial white bloom from top-left plus a diagonal linear wash. Together they curve the surface: flat fills read as plastic, gradients read as lens.
L3rim lensing — asymmetric 1.5px inset shadows: near-white top-left, warm-dark bottom-right. This is the single highest-value trick; it's what makes the edge look like refracted thickness.
L4convex sheen — big soft inset white from the top, big soft inset dark from the bottom, both with negative spread so they hug the ends. The pane bows toward you.
L5specular streak — ::before, a 1px gradient line along the top edge, brightest ~30% in. Reads as a window reflection.
L6corner glint — ::after, small screen-blended radial at a top corner. Cheap sparkle.
L7double cast shadow — tight 2px contact shadow + wide 30–70px ambient one. Depth 2 gets more of everything: blur 30, brighter rim, longer throw = visibly thicker, higher glass.
Costs to know about: nested backdrop-filters force stacking contexts and real GPU work — on a long page with 10 open regions this is felt, especially while scrolling text through the blur. Text contrast now depends on what's behind the pane (accessibility audit per-background). And overflow: hidden ancestors clip the blur's sample region, which produces edge artifacts near sticky headers.

So… is it a direction?

Technically: fully feasible, and honestly fun — the whole material is ~40 lines of CSS, degradable (drop L1 and you're back to tonal lift). If you ever want it, gate it as a "glass" theme flag rather than the default.

Philosophically: it's the strongest possible fight with the terminal. The tell is frame 1: the mock only works because we injected colored light behind the page. Liquid glass is a material for compositing UI over rich content — photos, video, maps. LifeLab's content is text on paper; there's nothing behind the page to refract, so the material has to invent its own scenery. The tonal-lift sheets you just approved take the one useful idea from this (depth = elevation) and pay none of the rent. This file is best kept as what it is — a curiosity, and a good argument you can point at later.