What does background-blend-mode do?
The background-blend-mode CSS property allows you to visually blend your background layers together. Background layers can include a combination of background images, gradients, and colors. To control how this blending affect looks, there are a total of 16 different values at our disposal. Depending on the colors in your background layers, some of these values may be more useful than others, or may behave differently than you may expect. One of the most common uses for blending background layers is to blend a background-image and a background-color together, to make the color look like a translucent overlay on top of the image.
What is background-blend-mode used for?
Blending background layers with background-blend-mode is used to achieve unique visual effects for creative purposes. These blended layers are often applied to header/hero images on the top of blog posts, or used in content boxes to make them more visually engaging than just an image with some text. Before background-blend-mode any blending of layers would be left to editing an image with a program like Photoshop before uploading onto the website. Offloading this photo editing step to CSS gives us web developers the ability to pull in dynamic data from a CMS. For example a site editor may set the brand's color as the background-color and a topic appropriate image as the background-image. The site's stylesheet can then take that dynamic data to create a header on a blog post that is brand appropriate, while being easily changed should the brand's color be updated down the line - much easier than having someone create new assets in Photoshop for every blog post.
Beyond creativity, background-blend-mode can find itself helping with a site's accessibility and readability when some text is overlaid on a background-image. The common use case of blending a background-image and a background-color to achieve a colorful translucent overlay may increase the contrast and overall readability of the overlaid text.
background-blend-mode Values Explained
There are a total of 16 different values that the background-blend-mode CSS property can be set to. Below is an example and description for each of them.
For each example:
- background-color property set to #AE2424
- background-image property set to an image of a desk setup
- background-blend-mode changes to each respective value being described
Note: When working with a background image and a background color - the image is the top layer and the color is the bottom layer.
normal
background-blend-mode: normal;
Normal is the default value for the background-blend-mode property. When applied, the user can only see one background layer. Each of the layers are opaque, and so only the layer at the top of the stack is visible.
When using the background-image and background-color properties, the image is the top layer and covers up the entirety of the background-color.
Example - background-blend-mode: normal;
multiply
background-blend-mode: multiply;
Multiply takes the top and bottom background layers and multiplies their colors together. When there's a black layer, the result is an entirely black image. If there is a white layer, there is no change.
In the case of a background color and a background image, the result often looks like the color is masking over the image - typically the result is a darker image overall.
Example - background-blend-mode: multiply;
screen
background-blend-mode: screen;
Screen takes the background layers' colors and inverts them, multiplies them, and then inverts them again. If there is a black layer, there is no change - a white layer will result in a white image.
Example - background-blend-mode: screen;
overlay
background-blend-mode: overlay;
Overlay varies depending on if the bottom background layer is lighter or darker. If the bottom layer is darker, the result is the same as when using multiply (background-blend-mode: multiply). If the bottom layer is lighter, the result is the same as when using screen (background-blend-mode: screen;).
Example - background-blend-mode: overlay;
darken
background-blend-mode: darken;
Darken composes the image with the darkest values of each color channel. If the background color is darker than the background image, then the image is replaced by the color. Alternatively, if the background color is lighter than the background image, then the image replaces the color.
Example - background-blend-mode: darken;
lighten
background-blend-mode: lighten;
Lighten composes the image with the lightest values of each color channel. If the background color is lighter than the background image, then the image is replaced by the color. Alternatively, if the background color is darker than the background image then the image replaces the color.
Example - background-blend-mode: lighten;
color-dodge
background-blend-mode: color-dodge;
The result of color-dodge is created by dividing the bottom color by the inverse of the top color. This is very similar to the screen (background-blend-mode: screen) value. If the foreground is black, there is no change. If the foreground has the inverse color of the backdrop it results in a fully lit color.
Example - background-blend-mode: color-dodge;
saturation
background-blend-mode: saturation;
Saturation results in an image that has the saturation of the top layer with the hue and luminosity of the bottom layer. If the bottom layer is a pure gray color with no saturation, there is no effect.
Example - background-blend-mode: saturation;
color
background-blend-mode: color;
Color results in a final image that has the hue and saturation of the top layer with the luminosity of the bottom layer.
Example - background-blend-mode: color;
luminosity
background-blend-mode: luminosity;
Luminosity's result comes from the luminosity of the top layer with the hue and saturation of the bottom layer. This is the same as the aforementioned color value (background-blend-mode: color;), but with the layers swapped.
Example - background-blend-mode: luminosity;
color-burn
background-blend-mode: color-burn;
Color-burn's result comes from inverting the colors of the bottom layer, then dividing that value by the top color, and finally inverting that value.
Color-burn similar to multiply (background-blend-mode: multiply;)
Example - background-blend-mode: color-burn;
hard-light
background-blend-mode: hard-light;
Hard-light comes from the result of multiply (background-blend-mode: multiply;) as long as the top layer is darker. If the top layer is lighter, the result comes from screen (background-blend-mode: screen;).
Hard-light is the same as overlay (background-blend-mode: overlay;), but with the layers swapped.
Example - background-blend-mode: hard-light;
soft-light
background-blend-mode: soft-light;
Soft-light's result is similar to hard-light (background-blend-mode: hard-light;) but softer.
If hard-light is a spotlight, then soft-light is a diffused spotlight.
Example - background-blend-mode: soft-light;
difference
background-blend-mode: difference;
Difference is the result of subtracting the darker color of the top layer from the lighter color of the bottom layer. Commonly the result is an image with high contrast.
If there's a black layer there will be no effect, but a white layer will invert the other layer's colors.
Example - background-blend-mode: difference;
exclusion
background-blend-mode: exclusion;
Exclusion's result is similar to difference (background-blend-mode: difference;), but with less contrast. If there's a black layer there will be no effect and a white layer will invert the other layer's color.
Example - background-blend-mode: exclusion;
hue
background-blend-mode: hue;
Hue's final color has the hue of the top layer alongside the saturation and luminosity of the bottom layer.
Example - background-blend-mode: hue;
Blending Multiple Background Layers
If you're using the background-image and background-color properties, then you have two background layers that you can blend. However, if you're using the background property, then you can set and blend several different layers together - this includes using more than just one blend mode between the layers. You can set background layers to images, colors, and gradients opening the door for some creative blending between more than just a background image and a background color.
For example, you can blend two background images together.
To achieve this affect we used:
- background: url('IMAGE URL'), url('IMAGE URL');
- background-blend-mode: lighten;
Videos
Also available on YouTube, and Instagram.
Browser Compatibility
As of writing this, all the major browsers fully support the background-blend-mode CSS property.
Supported major browsers include:
- Chrome
- Edge (Chromium)
- Safari
- Firefox
- Opera
Remember that compatibility can change over time and by browser version, so always test your layouts on as many browsers and devices as you can.
You can find the most up-to-date compatibility via Can I Use right here.
10% Off Web Development Courses
Learn web development skills with interactive courses (free & paid) by Scrimba.
Using our link, get 10% off all Scrimba plans - click here!
Note: We receive a monetary kickback if you sign up using our link.
Sources
Content & Research
- MDN <blend-mode> (Source)
- CSS Tricks Almanac on mix-blend-mode(Source)
- Chaining Multiple Blend Modes (CSS Tricks)
- MDN <background-blend-mode> (Source)
- CSS background-blend-mode Property (W3Schools)
- CSS Tricks Almanac on background-blend-mode (Source)
- Can I Use (Source)
