- Css image blending mode
- Syntax
- Values
- Description
- Formal syntax
- Examples
- Example using «normal»
- Example using «multiply»
- Example using «screen»
- Example using «overlay»
- Example using «darken»
- Example using «lighten»
- Example using «color-dodge»
- Example using «color-burn»
- Example using «hard-light»
- Example using «soft-light»
- Example using «difference»
- Example using «exclusion»
- Example using «hue»
- Example using «saturation»
- Example using «color»
- Example using «luminosity»
- Blend mode comparison
- HTML
- CSS
- JavaScript
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- background-blend-mode
- Try it
- Syntax
- Values
- Formal definition
- Formal syntax
- Examples
- Basic example
- Try out different blend modes
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
Css image blending mode
The CSS data type describes how colors should appear when elements overlap. It is used in the background-blend-mode and mix-blend-mode properties.
Syntax
The data type is defined using a keyword value chosen from the list below.
Values
The final color is the top color, regardless of what the bottom color is. The effect is like two opaque pieces of paper overlapping.
The final color is the result of multiplying the top and bottom colors. A black layer leads to a black final layer, and a white layer leads to no change. The effect is like two images printed on transparent film overlapping.
The final color is the result of inverting the colors, multiplying them, and inverting that value. A black layer leads to no change, and a white layer leads to a white final layer. The effect is like two images shone onto a projection screen.
The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter. This blend mode is equivalent to hard-light but with the layers swapped.
The final color is composed of the darkest values of each color channel.
The final color is composed of the lightest values of each color channel.
The final color is the result of dividing the bottom color by the inverse of the top color. A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color. This blend mode is similar to screen , but the foreground need only be as light as the inverse of the backdrop to create a fully lit color.
The final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value. A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image. This blend mode is similar to multiply , but the foreground need only be as dark as the inverse of the backdrop to make the final image black.
The final color is the result of multiply if the top color is darker, or screen if the top color is lighter. This blend mode is equivalent to overlay but with the layers swapped. The effect is similar to shining a harsh spotlight on the backdrop.
The final color is similar to hard-light , but softer. This blend mode behaves similar to hard-light . The effect is similar to shining a diffused spotlight on the backdrop*.*
The final color is the result of subtracting the darker of the two colors from the lighter one. A black layer has no effect, while a white layer inverts the other layer’s color.
The final color is similar to difference , but with less contrast. As with difference , a black layer has no effect, while a white layer inverts the other layer’s color.
The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.
The final color has the saturation of the top color, while using the hue and luminosity of the bottom color. A pure gray backdrop, having no saturation, will have no effect.
The final color has the hue and saturation of the top color, while using the luminosity of the bottom color. The effect preserves gray levels and can be used to colorize the foreground.
The final color has the luminosity of the top color, while using the hue and saturation of the bottom color. This blend mode is equivalent to color , but with the layers swapped.
Description
For each pixel among the layers to which it is applied, a blend mode takes the colors of the foreground and the background, performs a calculation on them, and returns a new color value.
Changes between blend modes are not interpolated. Any change occurs immediately.
Formal syntax
=
normal |
multiply |
screen |
overlay |
darken |
lighten |
color-dodge |
color-burn |
hard-light |
soft-light |
difference |
exclusion |
hue |
saturation |
color |
luminosity
Examples
Example using «normal»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: normal; >
Example using «multiply»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: multiply; >
Example using «screen»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: screen; >
Example using «overlay»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: overlay; >
Example using «darken»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: darken; >
Example using «lighten»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: lighten; >
Example using «color-dodge»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: color-dodge; >
Example using «color-burn»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: color-burn; >
Example using «hard-light»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: hard-light; >
Example using «soft-light»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: soft-light; >
Example using «difference»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: difference; >
Example using «exclusion»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: exclusion; >
Example using «hue»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: hue; >
Example using «saturation»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: saturation; >
Example using «color»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: color; >
Example using «luminosity»
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: luminosity; >
Blend mode comparison
In the following example, we have a with two background images set on it — a Firefox logo on top of a linear gradient. Below it, we have a provided a menu that allows you to change the background-blend-mode applied to the , allowing you to compare the different blend mode effects.
HTML
div>div> p>Choose a blend-mode:p> select> option selected>normaloption> option>multiplyoption> option>screenoption> option>overlayoption> option>darkenoption> option>lightenoption> option>color-dodgeoption> option>color-burnoption> option>hard-lightoption> option>soft-lightoption> option>differenceoption> option>exclusionoption> option>hueoption> option>saturationoption> option>coloroption> option>luminosityoption> select>
CSS
div width: 300px; height: 300px; background: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center, linear-gradient(to bottom, blue, orange); >
JavaScript
const selectElem = document.querySelector("select"); const divElem = document.querySelector("div"); selectElem.addEventListener("change", () => divElem.style.backgroundBlendMode = selectElem.value; >);
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Description to various blend modes on other website:
Found a content problem with this page?
This page was last modified on Jul 18, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
background-blend-mode
The background-blend-mode CSS property sets how an element’s background images should blend with each other and with the element’s background color.
Try it
Blending modes should be defined in the same order as the background-image property. If the blending modes’ and background images’ list lengths are not equal, it will be repeated and/or truncated until lengths match.
Syntax
/* One value */ background-blend-mode: normal; /* Two values, one per background */ background-blend-mode: darken, luminosity; /* Global values */ background-blend-mode: inherit; background-blend-mode: initial; background-blend-mode: revert; background-blend-mode: revert-layer; background-blend-mode: unset;
Values
The blending mode to be applied. There can be several values, separated by commas.
Formal definition
Initial value | normal |
---|---|
Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line . |
Inherited | no |
Computed value | as specified |
Animation type | Not animatable |
Formal syntax
Examples
Basic example
.item width: 300px; height: 300px; background: url("image1.png"), url("image2.png"); background-blend-mode: screen; >
Try out different blend modes
div id="div">div> select id="select"> option>normaloption> option>multiplyoption> option selected>screenoption> option>overlayoption> option>darkenoption> option>lightenoption> option>color-dodgeoption> option>color-burnoption> option>hard-lightoption> option>soft-lightoption> option>differenceoption> option>exclusionoption> option>hueoption> option>saturationoption> option>coloroption> option>luminosityoption> select>
#div width: 300px; height: 300px; background: url("br.png"), url("tr.png"); background-blend-mode: screen; >
.getElementById("select").onchange = (event) => document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; >; console.log(document.getElementById("div"));
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Feb 21, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.