• Frosted cards, nav bars, sidebars, modals/dialogs, and toolbars over busy/photo backgrounds
• Login/hero panels and overlays that should feel layered above the page
• Apple-style "liquid glass" heroes: refracting, slowly churning surfaces with a specular sweep
• Hover/scroll/enter motion on glass — frost deepening, highlight brightening, the panel lifting
• Any place where content needs to read as floating glass while staying legible

1. Frost —

   backdrop-filter: blur()

   plus

   saturate()

   to keep backdrop color vivid through the blur.
2. Translucency — a

   background

   with alpha (~0.08–0.18), never fully opaque, never fully clear.
3. Edge of glass — a hairline border brighter than the fill, ideally a lit top-left → dim bottom-right highlight, so the rim catches light.
4. Depth — layered

   box-shadow

   : an ambient drop shadow to float it, plus an

   inset

   top highlight and bottom shade to round the surface.

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%); /* Safari needs the prefix */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),     /* float */
    inset 0 1px 0 rgba(255, 255, 255, 0.35), /* top highlight */
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);      /* bottom shade */
}

blur(8–12px)

0.08–0.14

blur(24–40px)

0.10–0.18

rgba(0,0,0,0.3)

backdrop-filter

.glass {
  transition: backdrop-filter .4s ease, background .4s ease,
              box-shadow .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.glass:hover {
  backdrop-filter: blur(24px) saturate(180%);
  background: rgba(255,255,255,.18);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5);
}

• Entrance (frost resolving from clear): pair a

  [data-enter]

  transition with

  @starting-style { backdrop-filter: blur(0); opacity: 0; transform: translateY(16px) }

  .
• Specular sweep: a skewed white gradient animated across the surface on hover or as a slow ambient loop.
• Caveat: animating the blur radius is the most expensive thing here — the backdrop is re-blurred every frame. If hover janks, animate

  transform

  /

  box-shadow

  /

  background

  (cheap) and keep the blur delta small or snap it.

• Each glass element re-samples and blurs everything behind it. Limit the count; a dozen on screen tanks scroll FPS.
• Promote heavy glass to its own layer (

  transform: translateZ(0)

  or

  will-change: transform

  ), and remove

  will-change

  after the animation.
• Don't stack

  backdrop-filter

  elements over each other — nested blur re-blurs the blur (quadratic cost).
• Big radii (>40px) over large areas are the worst case; cap radius and panel size.

Packaged helper (

scripts/

):

scripts/seek-shot.sh anim.html 0 1.5 3

freezes the

?t=N

harness and screenshots each moment;

scripts/contact-sheet.sh sheet.png frame-*.png

tiles them for one-glance review. See

scripts/README.md

.

• One

  .html

  file: a busy backdrop, your glass markup, the CSS (frost + edge highlight + grain + shadows), and any inline SVG

  feDisplacementMap

  filter.
• A way to land on the resolved state and a frozen frame of any loop — glass verifies by both state (rest/hover/enter) and time (the sweep/refraction).
• Include the freeze harness below so any moment can be pinned for inspection.

?state=hover

?t=N

N

<script>
  const p = new URLSearchParams(location.search);
  const state = p.get("state");
  if (state) document.documentElement.dataset.state = state;   // CSS keys off :root[data-state="hover"]
  const t = p.get("t");
  if (t !== null) {
    document.getAnimations().forEach(a => { a.currentTime = parseFloat(t)*1000; a.pause(); }); // freeze CSS sweep
    const svg = document.querySelector("svg");
    svg?.pauseAnimations?.(); svg?.setCurrentTime?.(parseFloat(t));                            // freeze refraction
  }
  window.__ready = true;
</script>

?state=rest

?state=hover

?t=2

-webkit-

prefers-reduced-transparency

npx playwright screenshot --wait-for-timeout=500 "file://$PWD/glass.html?state=hover" hover.png
npx playwright screenshot --wait-for-timeout=500 "file://$PWD/glass.html?t=2"          loop.png

--color-scheme

?reduced=1

1. Opens standalone — no console errors; the glass overlaps a real busy backdrop, not a flat color.
2. Reads as glass — blur + bright edge highlight both visible, layered shadow floats it, no banding (grain present).
3. Text contrast holds over the brightest part of the backdrop (≥ 4.5:1 body).

4. ?state=

   /

   ?t=N

   freeze lands a deterministic, settled frame.

5. prefers-reduced-transparency

   → solid opaque panel;

   prefers-reduced-motion

   → refraction/sweep stopped;

   @supports

   fallback for no

   backdrop-filter

   .
6. Performance sane — glass count limited, blur not animated on a janky path, liquid refraction on one element only.

• references/glass-recipes.md

  — full copy-paste recipes: base glass card with tiers, the masked specular edge ring, anti-banding grain, hover/enter/scroll motion, the specular sweep, the SVG

  feDisplacementMap

  /

  feTurbulence

  liquid-glass filter with tuning knobs, performance rules, the reduced-transparency/reduced-motion/

  @supports

  fallbacks, contrast defenses, and the standalone freeze harness.