Adobe

decor

Web Platform Team Blog

Making the web awesome

Fading effects using blend modes

Fading effects are quite common on the Web today. They are used to display or hide an HTML element or to change an element into another element, gradually.

Fading transitions are pixel-by-pixel blends between an HTML element (the source element) and either the element behind it or the color in the background. A solution based on animating the opacity property is used to make the source element more or less transparent so that the background element becomes more or less visible, thus simulating the desired effect.

The Compositing and Blending spec describes a new way to blend an element with the content behind it by using the mix-blend-mode property, which can be enabled on stable versions of Chromium, Firefox and Opera, and will soon be officially supported in Firefox 31 and Safari 8.

A blend mode is a formula used for mixing source and background colors. This mix of source and background prevents animation using CSS animations or CSS transitions. However, when the content is generated by a CSS property such as color, background-color, or background-image: radial-gradient(...), we can animate the value of this property, and the animated content will be used in the blending operation.

Let’s assume we have an image we want to display or hide using a fade effect. If the initial background is white, we can use the screen or lighten blend mode. That’s because applying a screen or lighten blend mode on white produces white and applying a screen or lighten blend mode on black leaves the image unchanged. So if we animate the background color from white to black the image is displayed; and if we animate the background color from black to white the image disappears. Similarly, when starting from a black background, we can use the multiply or darken blend mode.

In the example below, I use the darken blend mode combined with a simple transition from white to black on the background-color to hide the image. For more interesting effects, you can generate arbitrary colors between the initial white and the final black by animating the background-color property using CSS animations. Move the mouse over the images to see the difference between the mix-blend-mode based effect (on the left) and the opacity-based effect (on the right). For the image on the left, notice the parts with bright colors start fading away sooner than the area with dark colors.

Check out this Pen!

We can use this technique as an alternative to creating grayed-out or inactive content. To accomplish this effect, we need to use a background color that acts as an identity operator and doesn’t change the result of the blend mode.

  • Black doesn’t change the result for screen, lighten, difference or exclusion.
  • White doesn’t change the result for multiply or darken.
  • Gray (#808080) doesn’t change the result for hard-light or overlay.
  • A transparent background doesn’t change the result for any blend mode.

The codepen below demonstrates the hard-light blend mode combined with a background transition from black to gray (the first row), compared to opacity based fading (the second row).

Check out this Pen!

Here is another example using the color-burn blend mode and a background-color transition from slategray to transparent:

Check out this Pen!

If the content you want to blend is a color and one or more images, you can get the same effects using background-color, background-image and background-blend-mode – all set on a single div. The background-blend-mode property is officially supported starting with Chrome 35, Firefox 30 and Opera 22.

My design skills don’t do Blend Modes justice, so I can’t wait to see more cool samples using this feature. Please share yours here or on Twitter.

One Comment

  1. July 09, 2014 at 2:13 pm, Fred said:

    Thanks for the efforts on compositing and blending!
    Every once in a while a background-opacity css property would save a DOM element or two. I googled and there seem to be many others who could make use of such feature as well. Unfortunately I did not find any w3c or whatwg discussions on that topic, so I wonder if there are any plans in that direction, or why there aren’t. I guess background-opacity could be specified and implemented nicely along background-blend-mode?