webglass.js — v1.0
Snell–Descartes refraction, SDF-accurate bezels, and specular rim lighting — rendered entirely in CSS backdrop-filter and SVG, zero canvas at runtime.
Each shape uses a distinct surface profile function. Normals are derived numerically,
fed to Snell's law, then encoded into SVG displacement maps matching the element's
exact border-radius.
Apple-preferred ⁴√ profile. Smooth continuous curvature from edge to flat centre.
Dome lens. √ profile produces maximum central refraction for circular elements.
Raised rim with a shallow interior dip. Mixes convex and concave using smootherstep.
Inverted squircle. Refracts outward, simulating a depression in optical glass.
Adjust refraction, bezel width, displacement scale, blur, and specular controls in real time. WebGlass rebuilds the filter graph and re-applies without page reload.
The glass layer is absolutely positioned inside the element, leaving your actual content untouched and fully interactive.
Glass is off by default. Enable it with --wg-render: true — set it on :root, a container, or a specific element. Everything else is CSS custom properties.
/* 1. Enable glass sitewide */ :root { --wg-render: true; --wg-shape: squircle; --wg-refraction: 1.45; --wg-bezel: 0.28; --wg-scale: 40; --wg-blur: 10; --wg-light-angle: -55; --wg-specular-strength: 0.65; --wg-specular-width: 0.25; --wg-specular-edge: 0.05; --wg-specular-back: 0.20; --wg-bg-opacity: 0.15; } /* 2. iOS tight-rim look */ .ios-style { --wg-specular-edge: 0; --wg-specular-width: 0.15; --wg-specular-back: 0.15; } /* 3. Soft glow look */ .glow-style { --wg-specular-edge: 0.3; --wg-specular-width: 0.6; --wg-specular-back: 0; }
<!-- Include stylesheet + script --> <link rel="stylesheet" href="assets/style.css"> <script src="webglass.js"></script> <!-- Add class="glass" — inactive until --wg-render:true cascades in --> <div class="glass card-glass">Content</div> <!-- JS API: programmatic enable + tune (writes CSS custom props) --> <script> WebGlass.apply(el, { render: 'true', shape: 'circle', refraction: 1.8, lightAngle: -90, specularStrength: 0.7, specularWidth: 0.15, specularEdge: 0, specularBack: 0.15 }); WebGlass.configure({ lightAngle: -90, bgOpacity: 0.2 }); WebGlass.refresh(); </script>
Every visual property is derived from first principles. No lookup tables, no texture hacks.
Refraction angle computed for each surface normal. Lateral displacement encodes the bent ray's x-component.
Rounded-rect signed distance field provides pixel-accurate outward normals that match the element's actual border-radius.
Apple's preferred lens surface. Continuous fourth-power curvature yields the characteristic smooth-to-flat bezel transition.
Blinn–Phong-style rim light. World normal from SDF gradient × surface tilt, blended via feBlend screen mode. Counter-highlight at lightAngle + 180°.