Liquid glass in CSS, with real refraction

export type Profile = "bevel" | "convex" | "rim" | "flat";

// Backdrop shift across the bezel, s = 0 at the outer edge .. 1 at its inner end, edge = 1. Paraxial refraction
// (IOR 1.5) through a rounded edge follows the surface slope; a finite slope at the silhouette spreads the bend over the
// whole bezel. bevel: edge 1 − (1 − s)³ → shift (1 − s)². convex: a dome over a circle (bezel = radius), the whole
// face magnifies. rim: the bevel in the outer 35 % only.
const BEND: Record<Profile, (s: number) => number> = {
  bevel: (s) => (1 - s) ** 2,
  convex: (s) => ((1 - s) * (2 - s)) / 2,
  rim: (s) => (s < 0.35 ? (1 - s / 0.35) ** 2 : 0),
  flat: () => 0,
};
// Fold limit: displacement × steepest slope must stay under the bezel (bevel 0.5 × bezel, convex 0.67, rim 0.17).
const SLOPE: Record<Profile, number> = { bevel: 2, convex: 1.5, rim: 2 / 0.35, flat: 0 };
export const maxDisplacement = (bezel: number, profile: Profile) => (SLOPE[profile] ? bezel / SLOPE[profile] : 0);

function sdRoundRect(x: number, y: number, w: number, h: number, r: number) {
  const qx = Math.abs(x - w / 2) - (w / 2 - r), qy = Math.abs(y - h / 2) - (h / 2 - r);
  return Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - r;
}

const maps = new Map<string, string>();
export function displacementMap(w: number, h: number, radius: number, bezel: number, profile: Profile): string {
  const key = `${w}x${h}:${radius}:${bezel}:${profile}`;
  const hit = maps.get(key);
  if (hit) return hit;
  const canvas = document.createElement("canvas");
  canvas.width = w; canvas.height = h;
  const ctx = canvas.getContext("2d")!, img = ctx.createImageData(w, h), d = img.data;
  const bend = BEND[profile], r = Math.min(radius, w / 2, h / 2);
  for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
    const px = x + 0.5, py = y + 0.5, depth = -sdRoundRect(px, py, w, h, r);
    let dx = 0, dy = 0;
    if (depth > 0 && depth < bezel) {
      const nx = sdRoundRect(px + 0.5, py, w, h, r) - sdRoundRect(px - 0.5, py, w, h, r);
      const ny = sdRoundRect(px, py + 0.5, w, h, r) - sdRoundRect(px, py - 0.5, w, h, r);
      const len = Math.hypot(nx, ny) || 1, m = bend(depth / bezel);
      dx = (-nx / len) * m; dy = (-ny / len) * m; // inward: the rim shows backdrop from further inside
    }
    const i = (y * w + x) * 4;
    d[i] = 128 + dx * 127; d[i + 1] = 128 + dy * 127; d[i + 2] = 128; d[i + 3] = 255;
  }
  ctx.putImageData(img, 0, 0);
  const url = canvas.toDataURL();
  maps.set(key, url);
  return url;
}

// SVG filter markup for one element size. displacement = max shift in px at the outer edge.
// Mount it inside an <svg><defs> (defs.insertAdjacentHTML("beforeend", markup)) so it parses as SVG; see A4 rule 2b.
// The bezel is capped at the corner radius (deeper, the corner creases on its diagonal) and the displacement at the
// profile's fold limit.
export function glassFilterSvg(id: string, o: { w: number; h: number; radius: number; bezel: number;
  profile: Profile; displacement: number; blur: number; saturate?: number }): string {
  const bezel = Math.min(o.bezel, o.radius, o.w / 2, o.h / 2);
  const displacement = Math.min(o.displacement, maxDisplacement(bezel, o.profile));
  const map = displacementMap(o.w, o.h, o.radius, bezel, o.profile);
  return `<filter id="${id}" x="0" y="0" width="${o.w}" height="${o.h}" filterUnits="userSpaceOnUse"
      color-interpolation-filters="sRGB">
    <feImage href="${map}" x="0" y="0" width="${o.w}" height="${o.h}" preserveAspectRatio="none" result="map"/>
    <feDisplacementMap in="SourceGraphic" in2="map" scale="${displacement * 2}"
      xChannelSelector="R" yChannelSelector="G" result="bent"/>
    <feGaussianBlur in="bent" stdDeviation="${Math.max(o.blur, o.profile === "convex" ? 1 : 0.5)}" result="frost"/>
    <feColorMatrix in="frost" type="saturate" values="${o.saturate ?? 1.4}"/>
  </filter>`;
}

// Chromium is the only engine that renders SVG filters inside backdrop-filter. Keep the userAgentData test: headless
// Chrome reports "HeadlessChrome/…", which the regex alone misses, so screenshot QA would only see the fallback.
export const supportsSvgBackdrop = typeof navigator !== "undefined" &&
  ("userAgentData" in navigator || /\bChrome\/\d+/.test(navigator.userAgent)) &&
  !/Firefox|FxiOS|CriOS|EdgiOS/.test(navigator.userAgent);

<div class="glass" style="--radius:22px">
  <div class="glass__optic"></div>   <!-- backdrop-filter: url(#id) in Chromium, blur() elsewhere -->
  <div class="glass__glow"></div>
  <div class="glass__rim"></div>
  <div class="glass__content">Button</div>
</div>

:root {
  --glass-fill: rgba(255,255,255,.15);
  --glass-rim-key: rgba(255,255,255,.96);
  --glass-rim-side: rgba(255,255,255,.24);
  --glass-rim-counter: rgba(255,255,255,.56);
  --glass-edge: rgba(0,0,0,.12);
  --glass-ink: #1d1d1f;
}
@media (prefers-color-scheme: dark) {
  :root { --glass-fill: rgba(18,18,24,.30); --glass-rim-key: rgba(255,255,255,.68); --glass-rim-side: rgba(255,255,255,.14);
          --glass-rim-counter: rgba(255,255,255,.35); --glass-edge: rgba(0,0,0,.32); --glass-ink: #fff; }
}
/* The edge line is a 1 px ring outside the silhouette, drawn with the shadow so it follows the radius. */
.glass { position: relative; isolation: isolate; border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--glass-edge), 0 8px 28px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.08); color: var(--glass-ink);
  /* the host must paint nothing: a <button>/<input> host otherwise brings the UA face colour
     (grey rgb(107,107,107) under color-scheme: dark) and the optic refracts that instead of the page */
  background: transparent; border: 0; -webkit-appearance: none; appearance: none; font: inherit; }
.glass > * { position: absolute; inset: 0; border-radius: inherit; }
.glass__optic { background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-fallback, 12px)) saturate(1.5);
  backdrop-filter: blur(var(--blur-fallback, 12px)) saturate(1.5); }
.glass__glow { pointer-events: none;
  box-shadow: inset 2px 3px 8px -4px rgba(255,255,255,.8),
              inset -2px -3px 8px -4px rgba(255,255,255,.35); }
/* Offset inset highlights follow the silhouette: the lit band is widest where the edge faces the light,
   so a wide capsule is lit along its whole top edge (a 135° gradient border would light only its left end). */
.glass__rim { pointer-events: none;
  box-shadow: inset 1.5px 1.5px 0 -.5px var(--glass-rim-key),
              inset -1.5px -1.5px 0 -.5px var(--glass-rim-counter),
              inset 0 0 0 .5px var(--glass-rim-side); }
.glass__content { position: relative; inset: auto; }
@media (prefers-reduced-transparency: reduce) {
  .glass__optic { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(245,245,247,.92); }
}

import { useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
import { glassFilterSvg, supportsSvgBackdrop, type Profile } from "./liquidGlass";

type GlassProps = { radius: number; bezel: number; displacement: number; blur: number; profile?: Profile;
  fill?: string; className?: string; style?: CSSProperties; children?: ReactNode };

export function Glass({ radius, bezel, displacement, blur, profile = "bevel", fill, className, style, children }: GlassProps) {
  const ref = useRef<HTMLDivElement>(null);
  const id = "lg" + useId().replace(/[^a-zA-Z0-9]/g, "");
  const [size, setSize] = useState<{ w: number; h: number } | null>(null);
  useLayoutEffect(() => {
    const el = ref.current!;
    const ro = new ResizeObserver(() => {
      const w = Math.round(el.offsetWidth), h = Math.round(el.offsetHeight);   // layout size, unaffected by transforms
      setSize((s) => (s && s.w === w && s.h === h ? s : { w, h }));
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, []);
  const svg = supportsSvgBackdrop && size && size.w > 0 && size.h > 0
    ? glassFilterSvg(id, { w: size.w, h: size.h, radius, bezel: Math.min(bezel, size.w / 2, size.h / 2),
        profile, displacement, blur }) : null;
  return (
    <div ref={ref} className={"glass " + (className ?? "")} style={{ ...style, ["--radius" as string]: radius + "px" }}>
      {svg && <svg width="0" height="0" style={{ position: "absolute", width: 0, height: 0, pointerEvents: "none" }} aria-hidden dangerouslySetInnerHTML={{ __html: `<defs>${svg}</defs>` }} />}
      <div className="glass__optic" style={{ ...(svg ? { backdropFilter: `url(#${id})` } : {}), ...(fill ? { background: fill } : {}) }} />
      <div className="glass__glow" />
      <div className="glass__rim" />
      <div className="glass__content">{children}</div>
    </div>
  );
}

.grid-backdrop {
  background:
    linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(60% 80% at 20% 20%, #e0435e, transparent 60%),
    radial-gradient(60% 80% at 80% 30%, #2b4de0, transparent 60%),
    radial-gradient(60% 80% at 60% 100%, #2fb57a, transparent 60%), #10131f;
}

precision highp float;
uniform sampler2D uBackdrop; uniform vec2 uRes; uniform vec4 uRect;
uniform float uRadius, uBezel, uDisp, uFrost, uTime;
uniform int uProfile;                      // 0 bevel, 1 convex, 2 rim
varying vec2 vUv;                          // 0..1, y down (upload the texture without FLIP_Y)

float sdRoundBox(vec2 p, vec2 b, float r) { vec2 q = abs(p) - b + r; return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r; }
float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
vec3 tex(vec2 px) { return texture2D(uBackdrop, clamp(px / uRes, 0.0, 1.0)).rgb; }

// Backdrop shift across the bezel; s = depth into the bezel (0 edge .. 1 inner end); edge = 1.
// Same curves as the TypeScript BEND table: bevel (1-s)^2, convex dome, rim = the bevel over the outer 35 %.
float bendAt(float s) {
  float a = 1.0 - s;
  if (uProfile == 1) return a * (1.0 + a) * 0.5;
  if (uProfile == 2) { float u = max(1.0 - s / 0.35, 0.0); return u * u; }
  return a * a;
}

void main() {
  vec2 px = vUv * uRes;
  vec2 c = uRect.xy + uRect.zw * 0.5, hb = uRect.zw * 0.5;
  float d = sdRoundBox(px - c, hb, uRadius);                    // < 0 inside
  vec3 back = tex(px), col = back;
  if (d < 1.0) {
    float depth = clamp(-d / uBezel, 0.0, 1.0);
    vec2 e = vec2(0.5, 0.0);
    vec2 n = normalize(vec2(sdRoundBox(px - c + e.xy, hb, uRadius) - sdRoundBox(px - c - e.xy, hb, uRadius),
                            sdRoundBox(px - c + e.yx, hb, uRadius) - sdRoundBox(px - c - e.yx, hb, uRadius)));
    float bend = depth < 1.0 ? bendAt(depth) : 0.0;
    vec2 off = -n * bend * uDisp;                                  // inward
    off += (vec2(hash(px), hash(px + 17.0)) - 0.5) * 1.5 * uFrost; // frost grain (uFrost 0 = clear lens, 1 = frost)
    float k = 0.02 * bend * bend;                                  // dispersion: the split grows as bend³, so it stays at the rim
    vec3 bent = vec3(tex(px + off * (1.0 - k)).r, tex(px + off).g, tex(px + off * (1.0 + k)).b);
    vec3 blur = (tex(px + off + vec2(2.0, 0.0)) + tex(px + off - vec2(2.0, 0.0)) +
                 tex(px + off + vec2(0.0, 2.0)) + tex(px + off - vec2(0.0, 2.0))) * 0.25;
    vec3 g = mix(bent, blur, 0.35 * uFrost);
    g = mix(g, vec3(dot(g, vec3(0.299, 0.587, 0.114))), -0.4);     // saturation x1.4
    g = mix(g, vec3(1.0), 0.10);                                   // fill (white 10 %)
    vec2 L = normalize(vec2(-1.0, -1.0));                          // key light top-left (y down)
    float facing = dot(n, L);
    float rim = 1.0 - smoothstep(0.0, 1.5, -d);                    // 1 px rim
    g += rim * mix(0.5, 0.9, max(facing, 0.0)) * (facing > 0.0 ? 1.0 : 0.55);
    g += (1.0 - smoothstep(0.0, 0.35, depth)) * max(facing, 0.0) * 0.18; // inner glow
    col = mix(back, g, clamp(0.5 - d, 0.0, 1.0));                  // anti-aliased silhouette
  }
  gl_FragColor = vec4(col, 1.0);
}

// Caustics: animated Worley cell borders, two layers multiplied.
vec2 hash2(vec2 p) { p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3))); return fract(sin(p) * 43758.5453); }
float cells(vec2 uv, float t) {
  vec2 g = floor(uv), f = fract(uv); float d1 = 8.0, d2 = 8.0;
  for (int y = -1; y <= 1; y++) for (int x = -1; x <= 1; x++) {
    vec2 o = vec2(float(x), float(y)), h = hash2(g + o);
    vec2 r = o + 0.5 + 0.45 * sin(t + 6.2831 * h) - f; float dd = dot(r, r);
    if (dd < d1) { d2 = d1; d1 = dd; } else if (dd < d2) { d2 = dd; }
  }
  return pow(1.0 - smoothstep(0.0, 0.3, sqrt(d2) - sqrt(d1)), 3.0);
}
float caustics(vec2 uv, float t) { return cells(uv * 4.0, t) * cells(uv * 6.5 + 3.1, t * 1.3) * 2.5; }

// Iridescence (thin film): hue shifts with viewing angle / surface normal.
vec3 thinFilm(float cosTheta, float thickness) {
  return 0.5 + 0.5 * cos(6.2831 * (thickness * (1.0 - cosTheta) + vec3(0.0, 0.33, 0.67)));
}

// Morph: smooth union of two glass shapes (merge radius k in px).
float smin(float a, float b, float k) { float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0); return mix(b, a, h) - k * h * (1.0 - h); }

// Liquid metal accent: opaque chrome bands drawn over the page; nothing behind is sampled.
precision highp float;
uniform vec2 uRes; uniform vec4 uRect;     // canvas px; shape rect x, y, w, h in px (y down)
uniform float uRadius;                     // corner radius px (h / 2 for a capsule or circle)
uniform float uRing;                       // rim width px; 0 fills the whole shape (icon, logo mark)
uniform float uBands;                      // reflection bands across the shape: 2–2.5 rim, 1.2–1.6 fill
uniform float uShift;                      // red/blue channel shift: 0 none, 0.2–0.35 UI, up to 0.6 logo marks
uniform float uAngle;                      // band direction in radians (1.2 ≈ 70°)
uniform float uTime;                       // seconds; keep it fixed under reduced motion
varying vec2 vUv;                          // 0..1, y down

float sdRoundBox(vec2 p, vec2 b, float r) { vec2 q = abs(p) - b + r; return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r; }
float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
float noise(vec2 p) {
  vec2 i = floor(p), f = fract(p); f = f * f * (3.0 - 2.0 * f);
  return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), f.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), f.x), f.y);
}
// One reflection band: thin white strip, thin dark strip, white again, then a long soft ramp from dark to light.
float band(float x) {
  const float s = 0.025;                   // band-edge softness (fraction of a band)
  float v = 0.98;
  v = mix(v, 0.07, smoothstep(0.10, 0.10 + s, x));
  v = mix(v, 0.98, smoothstep(0.16, 0.16 + s, x));
  return mix(v, mix(0.10, 0.85, smoothstep(0.22, 1.0, x)), smoothstep(0.22, 0.22 + s, x));
}

void main() {
  vec2 px = vUv * uRes;
  vec2 c = uRect.xy + uRect.zw * 0.5, hb = uRect.zw * 0.5, p = px - c;
  float d = sdRoundBox(p, hb, uRadius);                          // < 0 inside
  float a = clamp(0.5 - d, 0.0, 1.0);
  if (uRing > 0.0) a *= clamp(0.5 + d + uRing, 0.0, 1.0);        // keep only the rim band
  if (a <= 0.0) discard;
  float size = min(hb.x, hb.y);
  vec2 q = p / size;
  float edge = uRing > 0.0 ? 1.0 : 1.0 - smoothstep(0.0, 0.5 * size, -d); // 1 at the silhouette
  float s = dot(q, vec2(cos(uAngle), sin(uAngle))) * 0.5;       // bands run across the shape
  s += 0.35 * edge * edge;                                       // and bend where the surface turns away
  s += 0.08 * noise(q * 1.2 + uTime * 0.12);                     // slow liquid wobble
  s = s * uBands - uTime * 0.08;                                 // drift: about 12 s per band
  float k = uShift * 0.05 * (0.4 + edge);                        // fringes grow toward the silhouette
  vec3 v = vec3(band(fract(s + k)), band(fract(s)), band(fract(s - 1.3 * k)));
  vec3 col = mix(vec3(0.08, 0.085, 0.10), vec3(0.97, 0.975, 1.0), v);
  col *= 0.92 + 0.12 * clamp(-q.y, -1.0, 1.0);                   // a little brighter toward the top
  gl_FragColor = vec4(col * a, a);                               // premultiplied alpha
}

.metal-rim { position: relative; border-radius: 999px; }
.metal-rim::before {
  content: ""; position: absolute; inset: 0; padding: 3px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 200deg, #14151a 0 7%, #f7f8fc 10% 21%, #8a8d96 30%, #fff 43% 47%,
    #2a2b30 51% 59%, #d9dbe2 70%, #14151a 81%, #f7f8fc 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

<div class="glass" style="--radius:30px">
  <div class="glass__optic"></div>
  <div class="glass__glow"></div>
  <div class="glass__rim"></div>
  <div class="glass__bloom" aria-hidden="true"><div class="glass__beam"><i></i></div></div>  <!-- optional glow -->
  <div class="glass__beam" aria-hidden="true"><i></i></div>  <!-- twin beams: add <i style="--beam-start:.5"></i> -->
  <div class="glass__content">Get started</div>
</div>

.glass { --beam-width: 1.5px; --beam-length: 84px; --beam-lap: 5s;
         --beam-head: #fff; --beam-mid: rgba(255,255,255,.5); }
/* A ring as wide as the beam: the layer minus its content box. */
.glass__beam { pointer-events: none; padding: var(--beam-width);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* One streak rides the outline at constant speed. offset-rotate: auto (the default) turns it with the path, so the
   bright end of its gradient always leads. */
.glass__beam > i { position: absolute; left: 0; top: 0; width: var(--beam-length); aspect-ratio: 1;
  background: linear-gradient(to left, var(--beam-head), var(--beam-mid) 30%, transparent);
  offset-path: inset(0 round var(--radius));
  animation: glass-beam var(--beam-lap) linear infinite;
  animation-delay: calc(var(--beam-lap) * var(--beam-start, 0) * -1); }
@keyframes glass-beam { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* Bloom: the same beam 3 px wide, blurred by a wrapper. A filter on the masked layer itself runs before the mask
   and is cut into a hard grey band. */
.glass__bloom { pointer-events: none; filter: blur(4px); opacity: .8; }
.glass__bloom > .glass__beam { position: absolute; inset: 0; border-radius: inherit; --beam-width: 3px; }
@media (prefers-reduced-motion: reduce) { .glass__beam { display: none; } }

.glass__beam--comet > i { width: var(--beam-seg); background: var(--beam-head);
  opacity: calc((1 - var(--k) / var(--n)) * (1 - var(--k) / var(--n)));
  animation-delay: calc(var(--beam-lap) * (var(--k) / var(--n) * var(--beam-tail) - 1 - var(--beam-start, 0))); }

// Border beam: arc-length position (0-1, clockwise from the top-left end of the top edge, y down) of the
// outline point nearest to p, for a rounded box centred at the origin with half size b and corner radius r.
float rimPos(vec2 p, vec2 b, float r) {
  vec2 s = max(b - r, 0.0), q = clamp(p, -s, s), v = p - q;      // v: from the straight skeleton out to p
  float a = atan(v.y, v.x), h = 1.5707963 * r, d;                // a: clockwise from +x (y down)
  // Pick the quarter by the signs of v, never by comparing a: on straight edges a is exactly +-pi/2 or pi.
  if (v.x >= 0.0 && v.y <= 0.0) d = q.x + s.x + r * (a + 1.5707963) + q.y + s.y;                   // top, top-right, right
  else if (v.x >= 0.0) d = 2.0 * (s.x + s.y) + h + r * a + s.x - q.x;                             // bottom-right, bottom
  else if (v.y >= 0.0) d = 4.0 * s.x + 2.0 * s.y + 2.0 * h + r * (a - 1.5707963) + s.y - q.y;    // bottom-left, left
  else d = 4.0 * (s.x + s.y) + 3.0 * h + r * (a + 3.1415927);                                     // top-left
  return d / (4.0 * (s.x + s.y) + 4.0 * h);
}
// 0..1 beam intensity: `width` px just inside the edge (sd < 0 inside), bright head at lap phase t, fading over
// `tail` (fraction of the perimeter) behind it. Constant speed along the outline, whatever the aspect ratio.
float borderBeam(vec2 p, vec2 b, float r, float sd, float t, float tail, float width) {
  float behind = fract(t - rimPos(p, b, r));
  float along = 1.0 - clamp(behind / tail, 0.0, 1.0);
  float across = smoothstep(-width - 0.75, -width + 0.75, sd) * (1.0 - smoothstep(-0.75, 0.75, sd));
  return along * along * across;
}