Design

CSS3 Background Blends: Photoshop Background Effects in pure CSS3

July 29th, 2014

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.

background-blending-mode_collage

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;
}

background-blending-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.

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;
}

background-blending-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.

(dpe)

Denis works as a freelance web designer since 2005.

One comment for „CSS3 Background Blends: Photoshop Background Effects in pure CSS3
  1. David on July 31st, 2014 at 3:55 pm

    Very interesting – I’ll have to remember this as a possibility in future projects!.

    BTW – how come the first quotation mark is at the bottom of the font instead of at the top (like in the css blocks)?

A comment? Nice!

We are always glad about readers which initiate discussions or offer additional information to articles with their constructive comments. All comments are moderated towards this goal. As part of this fair play commenting we are using rel="nofollow". Please do not use a domain or spam-like word as your name. Thanks!