The snippet
A translucent background, a backdrop blur, a hairline border to catch the light, and a soft shadow to lift the panel off the page. Every frosted glass effect css recipe is a variation on those four lines, and the generators online are all writing the same declaration block. It is well supported, it composites on the GPU already, and it degrades to a flat translucent panel where it is missing.
What a blur cannot do
backdrop-filter averages the pixels behind the element. That reads as frosted, because frosting scatters light — but glass with any thickness does something else: it bends light. A blur leaves a straight line behind the panel straight, gathers no caustic at the edges, and gives the sheet no depth. It also cannot vary across the surface, so a css liquid glass effect built from blur alone is uniformly out of focus rather than curved.
Refraction instead of blur
The Glass shader takes the layer underneath — an image, a video frame, a line of text, or another shader — and offsets every sample by the surface normal it computes at that pixel. That is refraction rather than blur, so the thickness, the curvature and the dispersion are all numbers you can drag. It costs a WebGPU context where the CSS costs nothing, which is the honest trade.
import { ShaderCanvas } from "shadertown/react";
export function GlassPanel() {
return (
<div className="panel">
<ShaderCanvas shader="glass" source="/hero.jpg" />
<h2>Behind glass, not behind a blur</h2>
</div>
);
}
