CSS Blend Modes demo with gradients

Hover over the image to see the image as it would appear normally.

Switch to linear gradient background


There is a <div> under the picture, on which a radial gradient (or linear, if you switch to it) is applied. That radial gradient is a transparent ( RGBa (0,0,0,0) ) to black one, and the linear gradient is from a yellowish color to a transparent one.

On the picture which is entirely over the <div>, we apply mix-blend-mode: multiply;, to apply the above effect.