The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

1 / 3

Refractive Glass: Noise Bends the Backdrop

Chrome is the only engine that bends a real backdrop. Safari and Firefox run an SVG filter on an element and never on a backdrop, so there it is a copy of the scene's own gradient that bends, and over arbitrary content they get the frost and nothing else. Frosted glass blurs what is behind it; real glass moves it. feTurbulence paints a cloud, feDisplacementMap reads red as how far each backdrop pixel travels along x and green as y, and it runs before the blur averages anything. The lens and the frost are siblings, never nested: an element with a backdrop-filter starts its own backdrop root, so a lens inside the frosted box would find nothing left to bend. The filter travels as a data URI because a fragment reference cannot be resolved from a sandboxed frame.

cssjavascriptnoiseglassmorphismblurbackdrop-filterfiltersvg
2 / 3

Pure CSS Frosted Glass Effect

A translucent panel demonstrating the 'glassmorphism' effect by blurring and saturating the live content behind it using CSS backdrop-filter.

animationcssui/uxglassmorphismblurbackdrop-filter
3 / 3

Blur-up Image Loading

Improve perceived load times by displaying a blurred, low-resolution image first, then transitioning smoothly to the sharp, high-resolution version. This keeps content present on screen, preventing a 'broken' blank state.

animationuxtransitionblurperceived performanceimage loading