Background-blend modes

Photoshop in the browser

"The background-blend-mode CSS property describes how the element's background images should blend with each other and the element's background color." -MDN

Browsing the web, reading newspapers, watching television, if you do any these then you are familiar with image blending.

Blending essentially allows you to combine two different layers together to create a new layer, typically we combine an image and a colour, however our options are not just limited to colours and images.

Blending is not a new technique, it is however relatively novel in web design. With browser support on the rise, background-blend-modes have featured heavily throughout sites such as Fantasy Premier League and Spotify .

Hello, background-blend-mode

With browser support at over 75% with the excluding internet explorer and edge. The benefits of using the background-blend-mode now outweigh the risks of encountering an unsupported browser.

Getting started

Before creating background-blendstake time to familiarise yourself with these terms as they will feature heavily throughout. Destination, Source, Backdrop

Destination:

Bottom layer usually a colour or gradient

Source:

Top layer usually an image

Backdrop:

The area below the source, this is where the blending occurs

The blend types

normal

This is the default attribute which specifies no blending. The blending formula simply selects the source color.

multiply

The source color is multiplied by the destination color and replaces the destination. The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color.

screen

Multiplies the complements of the backdrop and source color values, then complements the result. The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged. The effect is similar to projecting multiple photographic slides simultaneously onto a single screen

overlay

Multiplies or screens the colors, depending on the backdrop color value. Source colors overlay the backdrop while preserving its highlights and shadows. The backdrop color is not replaced but is mixed with the source color to reflect the lightness or darkness of the backdrop.

darken

Selects the darker of the backdrop and source colors. The backdrop is replaced with the source where the source is darker otherwise, it is left unchanged.

lighten

Selects the lighter of the backdrop and source colors. The backdrop is replaced with the source where the source is lighter otherwise, it is left unchanged.

color-dodge

Brightens the backdrop color to reflect the source color Painting with black produces no changes.

color-burn

Darkens the backdrop color to reflect the source color. Painting with white produces no change

hard-light

Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop.

soft-light

Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop.

difference

Subtracts the darker of the two constituent colors from the lighter color. Painting with white inverts the backdrop color painting with black produces no change.

exclusion

Produces an effect similar to that of the Difference mode but lower in contrast. Painting with white inverts the backdrop color, painting with black produces no change.

hue

Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color.

saturation

Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change.

color

Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images

luminosity

Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This produces an inverse effect to that of the Color mode.

-per W3C

Syntax 

.example-hero {
  background: url('../img/bg44.jpg') #6534ff;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: 'normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue |saturation | color | luminosity';
}

Building our own background-blend

Starting with the HTML

<div class="example-hero">

For the Destination this background-color will do, 
 and for the Source we can use the this image

Selecting a background-blend-mode that fits your design is often a frustrating endeavour. To make my life easier, I like to animate the background-blend-modes.


When creating the animation, each blend should be given the same amount of time over the image. To achieve this divide the total number of blend types by 100.

100 / 16 = 6.25%

This means that each background-blend-mode will be given 6.25% of the full animation. Next we must decide on how long we want each blend to be applied for.

There are 16 background-blend-modes. If each blend were to applied for 3.5s long, then our total duration would be 56s.

16 * 3.5s = 56s

We know we have 16 background-blend-modes, we want each blend to be applied for 3.5s each and the animation will run for 56s.

Next we need to alternate between blends using CSS Keyframes. 

@keyframes blendTransition {
  0% { background-blend-mode: normal; }
  6.25% {background-blend-mode: multiply; }
  12.5% { background-blend-mode: screen; }
  18.75% { background-blend-mode: overlay; }
  25% { background-blend-mode: darken; }
  31.25% { background-blend-mode: lighten; }
  37.5% { background-blend-mode: color-dodge; }
  43.75% { background-blend-mode: color-burn; }
  50% { background-blend-mode: hard-light; }
  56.25% { background-blend-mode: soft-light; }
  62.5% { background-blend-mode: difference; }
  68.75% { background-blend-mode: exclusion; }
  75% { background-blend-mode: hue; }
  81.25% { background-blend-mode: saturation; }
  87.5% { background-blend-mode: color; }
  93.75% { background-blend-mode: luminosity; }
  100% {background-blend-mode: normal;}
}

I like to print the blend-mode on the screen. To do this use the ::after selector to fetch the blend name. 

<div class="example-hero">
 <div class="caption"></div>
</div>
.caption {
  background-color: #fff;
  bottom: 0;
  color: #6534ff;
  font-family: $lora;
  font-size: 20px;
  left: 0;
  padding: 12px;
  position: absolute;
  text-align: center;
  z-index: 2;

  &::after {
  animation: blend 56s ease infinite;
  color: #6534ff;
  content: '';
  }
}
@keyframes blendType {
  0% { content: 'normal';}
  6.25% { content: 'multiply';}
  12.5% { content: 'screen';}
  18.75% { content: 'overlay';}
  25% { content: 'darken';}
  31.25% { content: 'lighten';}
  37.5% { content: 'color-dodge';}
  43.75% { content: 'color-burn';}
  50% { content: 'hard-light';}
  56.25% { content: 'soft-light';}
  62.5% { content: 'difference';}
  68.75% { content: 'exclusion';}
  75% { content: 'hue';}
  81.25% { content: 'saturation';}
  87.5% { content: 'color'; }
  93.75% { content: 'luminosity';}
  100% {content: 'unset';}
}

Multiple images

Blending can also be used with more than one Source.

If you have used multiple background-images before, you will know that you can style each image individually, the same principle also applies here.

This means you have the ability to assign a background-blend per each background-image. 

.example-hero-double-blend {
  animation: multipleBlendTransition 56s infinite;
  background-image: url('../img/bg44.jpg'), url('../img/bg13.jpg')
  background-color: lighten(#6534ff, 25%);
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: screen, darken;
  box-sizing: border-box;
  display: flex;
  height: 220px;
  justify-content: center;
  margin: 20px auto;
  overflow: hidden;
  padding: 20px 0;
  width: 100%;
}

As you can see we have passed two images, we have also passed two background-blend-modes

Play with code

See the Pen Hero Blend Modes by Andrew (@andrewrock) on CodePen.