Most web interfaces settle for a caricature of glass: slap on `backdrop-filter: blur(16px)`, lower the background alpha to 15%, add a 1px border, and call it glassmorphism. While that creates a passable frosted plastic look, it completely ignores how actual physical glass behaves. Real glass does not merely blur whatever lies beneath it—it bends light rays along surface curvatures (refraction) and disperses white light into spectral fringes near the edges (chromatic aberration). When designing the floating pill navbar for this site, we wanted something that felt tactile, optical, and alive. Here is a technical breakdown of how we achieved true optical glass using dynamic SVG displacement maps, multi-pass chromatic separation, and GPU-conscious CSS. --- ## 1. The Anatomy of Real Glass To recreate glass authentically in the browser, we have to simulate three optical phenomena: 1. **Refraction & Edge Curvature**: Light passes through the flat center of a glass pane relatively undisturbed. But near curved chamfers and rounded pill edges, light rays bend sharply inward. 2. **Chromatic Aberration (Dispersion)**: Different wavelengths of light have different refractive indices. Blue light bends at a slightly different angle than red light, creating subtle color fringing at the perimeter of the lens. 3. **Internal Reflections & Specular Highlights**: Microscopic bevels along the edge catch light, creating a crisp hairline rim, while ambient drop shadows separate the glass pane from the canvas behind it. Standard CSS cannot do refraction on its own. However, the SVG filter specification provides ``, and modern browsers allow CSS `backdrop-filter` to target SVG filter definitions: ```css backdrop-filter: url(#glass-filter) saturate(1); ``` The challenge is building a displacement map that conforms precisely to dynamic pill dimensions, and then running chromatic dispersion in real time. --- ## 2. Generating the Vector Displacement Map on the Fly A static displacement map image won't work because our navbar has dynamic dimensions (`width: fit-content`) that adapt to screen sizes, font metrics, and navigation state. To solve this, we generate an inline SVG vector field dynamically in Svelte via `buildMap(width, height)`: ```ts const radius = 20; const blur = 7; const insetRatio = 0.035; function buildMap(width: number, height: number) { const inset = height * insetRatio; return ``; } ``` ### How the map works: - **X and Y coordinate encoding**: Red encodes horizontal displacement vectors, while Blue encodes vertical displacement vectors. Blending them with `mix-blend-mode: screen` creates a composite vector map. - **The Inset Neutralizer**: In an ``, a color value of 50% gray (`rgb(128, 128, 128)`) represents zero displacement. By layering an inset rounded rectangle filled with `hsl(0 0% 50% / .93)` and blurred by `7px`, the center of the navbar remains distortion-free and legible, while the refractive distortion ramps up smoothly toward the outer 20px pill corner radius. --- ## 3. Synchronizing Dimensions with ResizeObserver Because the vector map relies on the exact bounding box of the navbar element, we attach a `ResizeObserver` on mount. When the navbar is measured or resized (or when web fonts finish loading), the SVG map is serialized into a data URI and injected directly into the filter's ``: ```ts onMount(() => { const syncMap = () => { const { width, height } = glass.getBoundingClientRect(); if (!width || !height) return; const href = `data:image/svg+xml,${encodeURIComponent(buildMap(width, height))}`; mapImage.setAttribute('href', href); mapImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', href); }; const observer = new ResizeObserver(syncMap); observer.observe(glass); document.fonts?.ready.then(syncMap); syncMap(); return () => observer.disconnect(); }); ``` --- ## 4. The Chromatic Dispersion Pipeline In optical physics, chromatic aberration occurs because glass has different refractive indices for different light frequencies. We model this by splitting the backdrop's `SourceGraphic` into three parallel displacement passes, each with a slightly offset displacement `scale`: ```html ``` By displacing red by `-180`, green by `-170`, and blue by `-160`, the three color components separate slightly along high-curvature borders. When additive-blended back together, the center stays pure white/neutral, while the outer bevel exhibits delicate prismatic rainbows when scrolling past headings and high-contrast elements. --- ## 5. Physical Depth & Hairline Highlights The SVG filter takes care of light refraction, but we also need the tactile surface qualities of physical glass: ```css .glass { position: relative; width: fit-content; max-width: calc(100vw - 32px); height: 48px; display: flex; align-items: center; border-radius: 20px; /* Tint to ground the element on dark backgrounds */ background: rgba(0, 0, 0, 0.2); /* Apply our custom optical filter */ -webkit-backdrop-filter: url(#glass-filter) saturate(1); backdrop-filter: url(#glass-filter) saturate(1); /* Multi-tier shadows: hairline bevel + soft ambient occlusion */ box-shadow: rgba(255, 255, 255, 0.1) 0 0 0 0.5px inset, rgba(0, 0, 0, 0.1) 0 4px 16px, rgba(0, 0, 0, 0.08) 0 8px 24px; } ``` The secret sauce here is `box-shadow: rgba(255, 255, 255, 0.1) 0 0 0 0.5px inset`. A `0.5px` inset border catches imaginary light, creating the impression of a polished, rounded bevel edge without relying on thick, clunky border outlines. --- ## 6. GPU Compositing & Performance Applying real-time displacement maps to a backdrop filter on every frame can be computationally demanding if the browser attempts CPU software rendering. To guarantee a smooth 60fps / 120fps scroll experience: 1. **GPU Layer Promotion**: We apply `transform: translateZ(0)`, `will-change: backdrop-filter, transform`, and `backface-visibility: hidden`. This forces the compositor to place the navbar on its own GPU texture. 2. **Strict Paint Containment**: `contain: layout style paint` informs the browser layout engine that internal layout recalculations inside the navbar do not dirty outside nodes. 3. **Hidden SVG Definition**: The SVG hosting the filter definition is placed offscreen with `pointer-events: none; opacity: 0; z-index: -10; transform: translateZ(0);` so it never participates in hit-testing or layout passes. 4. **Accessible Fallbacks**: For users with reduced motion preferences, CSS transitions are silenced (`@media (prefers-reduced-motion: reduce)`), and for mobile screens below 620px, we switch to a simplified compact navigation pattern to save GPU bandwidth. --- ## The Takeaway Digital design often flattens physical materials into single-property shortcuts. But by combining SVG filter primitives—which have existed in browsers for over two decades—with modern CSS backdrop filters and reactive component sizing, we can build interface surfaces that feel genuinely tangible.

Notes worth keeping.

Simulating Real Optics: How We Built the Glass Navbar