From you have I been absent in the spring
When proud-pied April dress'd in all his trim
Hath put a spirit of youth in every thing
Part of the Blend Modes Reading List

Overlays on top of , 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: 

body {
	background-image:
	linear-gradient(90deg, rgba(197,0,0,.9) 66.6%, transparent 66.7%),
	url(spring-flowers.jpg);
	background-size: contain;
	background-blend-mode: normal;
	color: #fff;
}

To create some contrast between the image and the text that will go above it, I’ve placed a linear gradient on top of the background image. The gradient goes ⅔rd’s of the way across the page in a slightly translucent color before changing to completely transparent.

To enhance the contrast, the text has a subtle text-shadow applied: 

blockquote {
  text-shadow: 3px 2px 3px rgba(0,0,0,0.3);
}

In traditional web design, the only significant change possible at this stage is changing the alpha level of the color used in the gradient to provide it with more opacity. But blend modes provide many more options, which you can explore using the simple UI at the top of this article.

I’ve used only the options I think work best with white text on an image with fairly high contrast: these are not all the possible blend modes, and your choices will be different for images that are low contrast with dark text on top. The effects also change as the color of the gradient changes, so you are encouraged to experiment with each one.

Whatever you choose, it’s important to make an acceptable contrast with the image and text while background-blend-mode: normal is in effect, since that is what IE users will see. Other users will see the enhanced version: as a suggestion, try luminosity to start, which alters the CSS to include: 

body { 
    background-blend-mode: luminosity;
}

…and creates an effect that might be described as “darkened cel shader”.

This same technique can be used with any element that contains text with a background image to create uniquely enhanced contrast effects.

Photograph by Mark Freeth, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/GJNJOe