The library

Techniques, not templates

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

1 / 5

Inverting Headline: White Minus the Backdrop

One line, and the headline stops needing a colour. 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 grey is the blind spot, since 128 against 255 comes back as 127, the grey it was meant to beat. Only white is a true invert, because any other colour 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

2 / 5

Readable Labels with contrast-color()

Pass a background to contrast-color() and it hands back black or white, whichever stays readable on it. The four swatches and every step of the ramp below carry the same one-line declaration — no colour was paired by hand, and none was measured. The ramp is there to find the seam: somewhere along it the label flips, and the browser decides where.

cssaccessibilitycolorprogressive enhancementcontrast-color

3 / 5

Blend Any Two Colours with color-mix()

Mixing two colours used to mean a preprocessor function or hand-computed hex values. color-mix() does it in the browser: name a colour space, two colours, and how much of the first one you want. Drag the slider and watch the result bar and the declaration change together — the bar's background is the very color-mix() call printed underneath it.

csscolorcolor-mixinteractionslider

4 / 5

CSS Color Picker Gradients

This demo illustrates how a color picker's saturation/brightness square and hue strip can be constructed using layered CSS gradients. Drag the circular selectors to change the hue, saturation, and brightness, seeing the resulting color instantly.

csscolorgradientsuijavascriptinteractivity

5 / 5

Accessible Status Colors

This demo illustrates how to create accessible status indicators by toning down pure hues and combining color with clear text labels and icons. Colors are derived from HSL custom properties for backgrounds, borders, and text to ensure readability and semantic clarity.

accessibilitycolorui-designcss-variableshslstatus