Exploring CSS3 Background Blends: Creating Photoshop-like Effects with Pure CSS3

With the introduction of CSS3, we now have the capacity to add multiple backgrounds to a single element. This allows background images and/or colors to stack upon each other, much like in Photoshop’s layering concept. Supposing transparencies exist, the underlying background file, or color, can still shine through. The introduction of CSS3 Background Blends has opened new doors, allowing for unique and impressive combinations of multiple backgrounds.

Creating Multiple Backgrounds and Selecting Effects

Beginning the process, firstly we need to use the “background” property to create more than one background. Adding multiple backgrounds is achieved simply by defining them, separated by commas. Following that, we use the innovative “background-blend-mode” property to set the desired blending effect.

1
2
3
4

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

Original and “multiply” blended images

In this instance, we have used two JPEG files as our background images. Since JPEG files don’t contain any transparency, only the image called first will be visible – unless we utilize the CSS3 Background Blends. With the “multiply” value in the “background-blend-mode” property, we can combine the two images into a single stunning visual.

Emulating Photoshop Blending Effects

However, the “multiply” effect is just the tip of the iceberg. Numerous other blending effects are available, mirroring the layer effects found in Photoshop. Adobe has been instrumental in bringing this wide range of effects to CSS3. These effects can drastically enhance your images, with options like “soft-light” and “hard-light”, “darken” and “lighten”, “screen”, “overlay”, “color-dodge” and “color-burn”, to name some, extending even to “difference”, “exclusion”, “hue”, “color”, “saturation” and “luminosity”.

The outputs from CSS3 and Photoshop are nearly indistinguishable from each other. However, one must remember, using the “background-blending-mode” will apply the effect to all the given backgrounds.

1
2
3
4

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

Original and “lightened” blended images

Using the “lighten” effect on both JPEGs, as demonstrated in this example, results in a plain white background. To use the effect on the first background only, we have the option of designating the second background to be displayed without effects.

1
2
3
4

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

In this case, we are individually defining effects for each image involved, where the second image, marked by the value “normal”, ensures that no effect is applied. You can choose any combination of effects that best suits your design needs.

1
2
3
4

body {
  background: url("clouds.jpg"), url("castle.jpg"), url("another.jpg");
  background-blend-mode: lighten, multiply, normal;
}

Remember to always use the “normal” value for any final background in your projects. This is required as there will be no following image or color to blend. While CSS3 Background Blends are not needed for simple backgrounds, they come in handy when using the “transition” property or for more complex designs.

Whether you choose images or colors does not matter. Each defined background will be treated as a separate layer to which an effect is applied. CSS3 gradients will be processed correctly as well.

1
2
3
4

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

Current Browser Support

The “background-blend-mode” property is currently supported by the latest versions of major browsers as of writing this, including Chrome 35+, Firefox 30+, and Opera 22+. Safari’s support for the feature is anticipated from version 8 onwards.

You can find the original article on Noupe

This article was updated in 2025 to reflect modern realities.

[UPDATED_TB_2025]