background-blend-mode property

Some people think that stunning image effects can be achieved only in graphic editors — nothing could be further from the truth. Adobe’s Photoshop did not invent blend modes and you can use them to style your image dynamically with CSS.

Blend modes are used to decide how elements’ backgrounds blend with each other. You can mix together not only colours but also images and gradients. Blend mode takes colours of two pixels which lay on the top of each other and combines them in different ways. The default value assigned to blend mode is intended to hide the lower layers with the top one.

The background-blend-mode property in CSS decides how an element's backgrounds blend with each other. The value is a list of blend modes that correspond to each background layer. You can add several backgrounds with different blend modes each but they should be defined in the same order. If the blending modes list has a different size than the properties list - it will be repeated or truncated until the lengths match.

The background-blend-mode offers many blend mode values to choose from:

  • color - combines the luminance of the base element with the hue and saturation of the second one.
color-burn effect
  • color-dodge - brightens the base colour decreasing contrast.
exclusion effect
  • hard-light - has two different effects which depend on the power of the lightness of the top layer. If the blend colour is lighter than 50% grey - the result will be lightened. Otherwise, it will be darkened.
lighten effect
  • luminosity - preserves top colour while using the saturation and hue of the one below. Has the opposite effect to color.
multiply effect
  • normal - the first background value won't be affected by the second one.
saturation effect
  • screen - element's colours get inverted, multiplied and inverted again. This means that using screen on the white layer will result in the white image but on a black one - the image will be untouched. It has the opposite effect to multiply mode.

Check out an example of all of them below:

background-blend-mode examples

Please note that this property is not compatible with Edge and Internet Explorer. For more information, you should check the official documentation.

Originally published at on August 11, 2019.



Front end and CSS maniac 🎨 Travel photographer in free time 📷

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store