Posted on Jun 13 For this week's Codepen Challenge, I did a Color Compare Range Slider. It's using an to switch between two selectable colors of your own choice.A Codepen-user asked this:How did you do this?It's not super complex, but requires a lot of visuals to explain, so let's dive in!First, you need an image where all the pixels you do not want to color, are transparent:The same image will be used twice: Once as a regular image in an -tag, and as a custom property: --cc-mask:url(path-to-image).Then you style an :The background is a linear-gradient with a hard stop-point behind the thumb (the grey bar):--_c1 and --_c2 are the colors. These are updated from javaScript, when you select a different color. The --_x is the current value of the range-sldier.Then you add the image as a mask and set mix-blend-mode to multiply:You then add the behind the range-slider, and we're almost there:Finally, we'll add two .I'm using two small helper-scripts, one for setting the scope of a CSS Custom Property and one for setting the property (see the code in the Codepen below).On the wrapper,