Drag the frosted panel over the cards. Switch between blur modes that go beyond CSS backdrop-filter — directional blur, tilt-shift, and custom gaussian kernels with color tinting.
drag the panel to reveal the blur over different content
1. Background cards live inside a
<canvas layoutsubtree> — fully styled with CSS
2. drawElementImage() captures the background layer as canvas pixels
3. The region behind the frost panel is processed through a custom WebGL blur shader
4. Blurred pixels + color tint are composited back, then the panel's HTML content is drawn on top via drawElementImage()
CSS backdrop-filter can only do standard gaussian blur. This demo applies directional blur, tilt-shift, and custom kernels — only possible with HTML-in-Canvas compositing between layers.