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

Inverting Headline: White Minus the Backdrop

One line, and the headline stops needing a color. mix-blend-mode: difference subtracts the two layers channel by channel, so white text hands back the exact inverse of whatever is under it: black on a bright sheet, white on a dark hero, cyan over magenta, all of it per pixel and without a second copy of the text. Three things bound it. Mid gray is the blind spot, since 128 against 255 comes back as 127, the gray it was meant to beat. Only white is a true invert, because any other color has channels it cannot fully subtract. And a blended element reads everything painted beneath it in its stacking context, so isolation: isolate on the scene is what stops the headline from subtracting the whole page.

csscontrasttypographytextcolorblend-modeno-jshero

3 / 3

Pure CSS Halftone Texture

Achieve a vintage halftone or risograph print effect by layering a CSS radial gradient for repeating dots over a base color or gradient, blended using `mix-blend-mode`.

animationcssgradientblend-modetexturehalftone