Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.
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.
This component demonstrates a draggable image comparison slider built by layering two images and dynamically adjusting the `clip-path` property of the top layer using a CSS custom property controlled by JavaScript.
A custom-styled range slider where the track fills with a gradient color from the left as the slider thumb is moved, using a CSS background-size trick and a JavaScript-driven custom property.
A custom styled HTML range input with a dynamic gradient fill on the track and a live value bubble that follows the thumb as it's dragged.