CSS3 Background Blends: Photoshop Background Effects in pure CSS3 by Denis Potschien

With CSS3 we are able to add more than one background to an element. In doing so background images and/or colors are piled upon each other, just as you know from the layers concept of Photoshop. While transparencies exist, the underlying background file or color will shine through. The new CSS3 Background Blends allow for even more possibilities to combine several backgrounds into one impressive appearance.

Create Backgrounds and Choose Effects

To get started we first need to create more than one background using the „background“ property. Adding backgrounds is simply done by comma-separating them in the background definition. Afterwards use the property „background-blend-mode“ to define the blending effect.

1
2
3
4

body {
  background: url("wolken.jpg"), url("burg.jpg");
  background-blend-mode: multiply;
}

Originals and per „multiply“ stapled images

In this example we use two JPEGs as background images. As JPEG never contains any transparencies, only the image called first will be shown – without CSS3 Background Blends, that is. By making using of the value „multiply“ in the property „background-blend-mode“ both images are multiplied into one another.

Advertisement

Photoshop Blending Effects

There’s a multitude of further effects besides „multiply“. All available effects resemble those layer effects known from inside Photoshop very closely. This is no wonder as Adobe has collaborated in bringing these effects to CSS3. WE have ways of making images look sharp per CSS3, using the effects „soft-light“ and „hard-light“, „darken“ and „lighten“, „screen“, „overlay“, „color-dodge“ and „color-burn“, „difference“, „exclusion“, „hue“, „color“, „saturation“ and „luminosity“.

Yes, that’s exactly what you get from Photoshop. And if you compare the results from CSS3 with those from Photoshop you’ll not find any differences either.

Be aware that using „background-blending-mode“ will always put the effects to all backgrounds given..

1
2
3
4

body {
  background: url("wolken.jpg"), url("burg.jpg");
  background-blend-mode: lighten;
}

Originals and „lighten“ed images

In this example we use the „lighten“ effect on both JPEGs. This results in a plain white background. To invoke the effect on the first background only, we can define the second to be shown without any effects..

1
2
3
4

body {
  background: url("wolken.jpg"), url("burg.jpg");
  background-blend-mode: lighten, normal;
}

And that’s what we do here. In this example we define individual effects for each image involved, where the value „normal“ makes sure that no effect is applied. It is possible to choose any combination of effects, of course.

1
2
3
4

body {
  background: url("wolken.jpg"), url("burg.jpg"), url("sonstwas.jpg");
  background-blend-mode: lighten, multiply, normal;
}

Make sure that you call the value „normal“ on the any last background in your projects as no image or colors follows the last one 😉 Using CSS3 Background Blends is not necessary for simple backgrounds. Keep using Photoshop and export the images accordingly. But when you think of using the „transition“ property, Background Blends make perfect sense.

Whether you choose to use images or colors doesn’t matter. Each defined background will always be handled as a separate layer to which an effect is applied. CSS3 gradients will also be handled correctly.

1
2
3
4

body {
  background: url("wolken.jpg"), red;
  background-blend-mode: lighten, normal;
}

Browser Support

At the time of this writing Chrome 35+, Firefox 30+ and Opera 22+ all support the property „background-blend-mode“. These are the most recent versions. Safari is expected to be supporting the feature from version 8 onwards.

This article was originally posted on Noupe