The library

Techniques, not templates

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

1 / 2

Blend Any Two Colors with color-mix()

Mixing two colors used to mean a preprocessor function or hand-computed hex values. color-mix() does it in the browser: name a color space, two colors, 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

2 / 2

Dynamic CSS Color Palette Generation with color-mix()

Generate an entire color palette—including shades, tints, and interactive states—from a single brand color using CSS's `color-mix()` function. This enables effortless re-theming of components by simply updating one CSS variable.

animationcssdesign-systemvariablesthemingcolor-mix