Estimated reading time: 1 minute, 45 seconds
Overlays on top of background images, often used to contain and provide contrast for text, have traditionally been limited a single color, sometimes combined with opacity. After a while, this becomes staid, restrictive and a little boring. For designers, CSS blend modes offer many more options, while still allowing backwards compatibility with browsers that don’t yet support blend modes (at this stage, Internet Explorer).
First, let’s look at the basic CSS: