Photoshop like Blend Modes using CSS

September 30, 2018

334

Manage the way an element blends chromatically with the underlying elements. Similar to Blend modes (blend options) in Photoshop or Gimp

Since the W3C CSS specification is no longer organized in a single document, several working groups have enriched the original proposal of CSS3 with the introduction of new modules. This is often, at the moment, experimental features, but with the expansion of support on the various browsers, they are destined to constitute the future of CSS.

In this article, we will deal with three properties provided in the Compositing and Blending Level 1 module. These properties introduce in CSS the possibility to manage the way in which an element blends chromatically with the underlying elements. It is the native implementation in the style sheets of the so-called Blend modes (fusion options) that can be used in graphics programs such as Photoshop or Gimp. It is no coincidence that the module was proposed and developed by the Adobe Web Platform team.

mix-blend-mode

We start our analysis from the mix-blend-mode property. It serves to set a blending mode for any HTML element (but also SVG) with respect to the elements that are placed behind the element itself, to its background we would say.

Analyzing the compatibility chart of Can I Use, we derive this scheme of support on browsers:

To enable support on Google Chrome, it mix-blend-mode s necessary, as for other experimental features, to open the configuration page at the URL chrome://flagsand enable the ‘Enable experimental Web Platform functions’ option, close all browser windows and restart.

Examples with mix-blend-mode

The property mix-blend-mode can take one of the following values:

These values are all supported by the browser can handle the property, with the exception of Safari, which currently does not support the values hue, saturation, color, luminosity.

Those who have used blend modes at least once in Photoshop will have noticed how these values match those of the layer merge options in the Adobe program.

To make clear the mode of implementation of the property and the effect that is obtained, we have prepared a sort of gallery in which the various blending options have been applied to the same image. The fusion, in each case, occurs with respect to the background color of the element that contains the image. You can modify the example by varying this color to check the result.

At the CSS code level everything is defined in a single line of code, just apply the property on the element for which we want to set a particular mode of fusion:

<pre class=”brush: php; html-script: true”>
#img-1 {mix-blend-mode: normal;}
#img-2 {mix-blend-mode: multiply;}
#img-3 {mix-blend-mode: screen;}
#img-4 {mix-blend-mode: overlay;}
#img-5 {mix-blend-mode: darken;}
#img-6 {mix-blend-mode: lighten;}
[…]
</pre>

All very intuitive, therefore. Especially when working with images, in defining a blending mode you just need to be aware of the way each of them reacts with respect to black and white. Summarizing:

a black background leaves unchanged the image with the values screen, lighten, differenceand exclusion; returns black in all other cases except with hard-lightand luminosity;
a white background leaves the image unchanged with the values screenand multiply; It returns the white in all other cases except with hard-light, difference, exclusionand luminosity;

If you set a transparent background ( background: transparent;), by default the merging will occur with the background of the element behind the transparent one. In this further example , the images will merge with the light gray that serves as background color to the gallery container. Here is the code that interests us:

<pre class=”brush: php; html-script: true”>
#griglia li {
border: 5px solid #066ac8;
display: inline-block;
width: 300px;
margin: 10px;
background: transparent;
}
</pre>

isolation

If we want to avoid this behavior, we must apply the isolation property with the value to the element that is directly in the background isolate. In this way an element will only merge with its direct element-background and not with those behind it.

<pre class=”brush: php; html-script: true”>
#griglia li {
border: 5px solid #066ac8;
display: inline-block;
width: 300px;
margin: 10px;
background: transparent;
isolation: isolate;
}
</pre>

In this case we obtain the images with the normal aspect because in fact they go to merge with a background that has no colors as transparent.

Fade effect with blend modes

All this can be exploited to obtain interesting transition effects such as a fade effect image gallery.

In this example we propose we have applied to the two images a different fusion option, screen on the first, multiply on the second:

<pre class=”brush: php; html-script: true”>
#img-1 > img {mix-blend-mode: screen;}
#img-2 > img {mix-blend-mode: multiply;}
</pre>

We want the image to appear on the hover in its original appearance. We would be tempted to create a transition applied to the property mix-blend-mode, varying its value to set it to normal. Unfortunately, the blending properties in CSS can not be animated. We must resort to a stratagem.

According to what we have seen before, we know for example that screenagainst a black background it leaves the image in its original appearance. Well, it will be enough then to apply the transition on the hover to the background color of the div that contains the image, modifying it from the initial blue to the black. Here is the code:

<pre class=”brush: php; html-script: true”>
/* Impostazioni iniziali del div che contiene l’immagine */
#img-1 {
isolation: isolate;
background-color: #066ac8;
transition: background-color 0.5s ease-in;
}
/* Modifica dello sfondo sull’hover */
#img-1:hover {
background-color: black;
}
</pre>

Similarly we can act on the second image, but setting the background on white, since the value multiplyshows the image in the normal state:

<pre class=”brush: php; html-script: true”>
#img-2 {
isolation: isolate;
background-color: #066ac8;
transition: background-color 0.5s ease-in;
}
#img-2:hover {
background-color: white;
}
</pre>

The same result is obtained if a transparent background is set on the hover .

Apply mix-blend-mode to a title

As mentioned, it mix-blend-modecan be applied to any type of HTML element. Here we have assigned to the titles h1 h2.

<pre class=”brush: php; html-script: true”>
h1 {
font-size: 72px;
mix-blend-mode: overlay;
}
h2 {
font-size: 46px;
mix-blend-mode: color-burn;
}
</pre>

Notice how the effect has a greater impact when the background is represented by an image (as in the header) than when it is represented by a solid color (the title that opens the text part).

background-blend-mode

The third property we will analyze is background-blend-mode . Unlike mix-blend-mode, it manages the way in which the different levels set as the background of an element merge: an image with solid background color, two images set as background with color, an image with a gradient, etc.

The on browser support is currently larger than mix-blend-mode. If you take into account the most recent versions of the main browsers, you will see that only Internet Explorer 11 is missing.

The definition of the property is very intuitive. To the element to which we want to apply the effect, we will have to assign, in the simplest scenario, a color, and a background image, to then assign one of the merging options already seen. Here is the relevant CSS code (the background is relative to a div with id img-1:

<pre class=”brush: php; html-script: true”>
#img-1 {
background-color: #066ac8;
background-image: url(pict.jpg);
background-blend-mode: screen;
}
</pre>

The demo also presents the fade effect, just to point out how it can be implemented by following this path.

We continue with a variation on the topic. Here we added, as CSS allows it, another background image. Both will merge, with the blending methods set, with solid color set through background-color:

<pre class=”brush: php; html-script: true”>
#img-1 {
background-color: red;
background-image: url(pict.jpg), url(griglia.jpg);
background-blend-mode: screen, multiply;
}
</pre>

As you can see, when you have multiple backgrounds, background-blend-modeyou can set multiple options, separated by commas.

In the next example it shows in action the blend effects obtainable using an image / gradient as background. Here is the code again:

<pre class=”brush: php; html-script: true”>
#img-1 {
border: 5px solid #066ac8;
width: 300px;
height: 300px;
margin: 10px auto;
background-color: red;
background-image: linear-gradient(left, rgb(241, 196, 15) 0%, rgba(224, 227, 229, 0) 100%), url(pict.jpg);
background-blend-mode: screen, multiply;
}
</pre>

Conclusions

As we can see, these are properties that can enormously widen the horizons of the graphic effects obtainable with CSS alone. As in many other cases, the limit seems to be solely that of creativity. Meanwhile, here is a series of advanced examples collected on Code Pen by Bennett Feely.