The library

Techniques, not templates

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

1 / 3

Grain on a Gradient: Two Surfaces

Two surfaces: a gradient, and a sheet of noise lying on it. The stack opens so you can see the sheet is nothing clever, only grey static, and compare lays the same gradient down twice with grain on one of them, which settles the argument faster than any amount of describing it. mix-blend-mode: overlay is what turns that static into tooth. It moves the gradient's lightness and leaves the hue alone, so the color survives and the plastic smoothness does not. The noise is an SVG of feTurbulence carried as a background image rather than a CSS filter, since the filter runs inside the SVG and CSS only loads the picture it makes. Each grain button is a different filter, not the same one turned up.

cssgradientblend-modenoisesvgtexture

2 / 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

3 / 3

Gradient Banding Fix with Noise

This technique prevents undesirable 'banding' in smooth gradients by layering a subtle noise texture over them. The noise, blended with the gradient using `background-blend-mode: overlay`, introduces tiny variations that trick the eye into perceiving a continuous, smoother transition, resulting in a more premium and refined look.

animationcssui/uxgradientnoisedithering