I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

CSS blend modes are an easy way to add image or text effects right in the browser. Actually, the mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background, and this means that any images or text, borders or headings will be influenced by this property.

COIDEA - CSS mix-blend-mode and Stunning Parallax Slideshow

Attention: Browser support is pretty good, but not entirely consistent for CSS mix-blend-mode property. Before starting on a design utilizing this feature, be sure to check caniuse.com for "mix-blend-mode". Currently, Edge and Safari are lacking support!

As said, the mix-blend-mode property is used to specify the blend mode for blending an element with the content behind the element. It comes with different values such as normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color, luminosity, and because of this, the traditional way of editing and then saving photos from an image editing software solution is not always necessary. Of course, this does not mean that mix-blend-mode will from now completely eliminate the need for image editing software. Designers, keep calm and blend it. :)

When it comes to this example, this is not one of those articles which show you examples for each of the mix-blend-mode values. I wanted to make an example of use in the real world by using mix-blend-mode of color-burn. But, only color-burn? Don't you hate boring articles? Because is my answer "YES!", to spice up the story I added a simple parallax slideshow made with GSAP's TweenMax and ScrollMagic. Indicators let you navigate through the slideshow and click on each slide (de)activates simple fullscreen detail view.

Of course, as always you can freely download the code, expand it and change it as you like and do something awesome. I hope you enjoy!

References and Credits