Rows of lavender shown disappearing to the horizon

Blend modes, long a part of SVG and Adobe products like PhotoShop, are finally making their way to native support in browsers via CSS. While they are some of the most promising and visually exciting aspects of modern web development, blend modes can also be difficult to understand; thus, this reading list, which emphasizes exploration via practical examples.

Goals: Apply CSS blend modes to web page backgrounds and content

Time: 3 hours

Prerequisites: Basic CSS (including selectors, text, images and animation). Some experience in will likely be helpful.

As CSS blend modes are quite new and are yet to have their potential fully explored, this reading list will feature additions in the very near future; I’ll always provide notification of major updates via Twitter.


  1. Understanding Blend Modes
  2. Darken & Lighten
  3. Tinted Images w/ Blend
  4. Animating Blend Modes
  5. Animating Image Changes
  6. Using Blends For Products
  7. Multilayer Effects
  8. 3D Glasses w/ Blend Modes
  9. 3D Glasses w/ Blend Modes
  10. Automatic Text Contrast
  11. Text Masks
  12. Better Backgrounds
  13. More Text Effects
  14. Diagrams w/ SVG & Blend Modes
  15. Scribble Image Reveal
  16. Better Borders w/ Blend Modes
  17. Fullscreen Background Video w/ mix-blend-mode

Photograph by Loïc Lagarde used under a Attribution-NonCommercial-NoDerivs 2.0 Generic license

Enjoy this piece? I invite you to follow me at to learn more.