CSS background-blend-mode Property

Description

The background-blend-mode property defines the blending mode of the background image to the background color or other background images. It is permissible to specify several values ​​separated by commas, while they will be applied to the background images listed in the background-image in the same order.

Initial value
normal
Applies to
All elements
Inherited
No
Media
None
Computed value
As specified
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.backgroundBlendMode

Syntax

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Values

  • normal Normal. No color mixing is used. Default mode.
  • multiplyMultiplication. In this mode, the value of the primary color is multiplied by the value of the combined color. The resulting color is always a darker color. As a result of multiplying the value of any color by the value of black, black is produced. As a result of multiplying the value of any color by the value of white, the color remains unchanged.
  • screenLightening In this mode, the inverse values ​​of the primary and combined colors are multiplied. The resulting color always uses a lighter color. When lightening using black, the color remains unchanged. When overlapping using white, the color becomes white. The effect obtained is similar to superimposing on each other images of numerous photographic slides using a projector.
  • overlayOverlap. In this mode, colors are multiplied or lightened depending on the primary color. Patterns or colors overlap existing pixels, leaving the light and dark areas of the primary color unchanged. The base color is not replaced, but mixed with the combined color, which allows you to reflect the presence of light or dark areas of the original color.
  • darkenReplacing with a dark one. As a result, the main or combined color is selected, depending on which one is darker. Pixels with a color that is brighter than the combined one are replaced, and pixels with a color that is darker than the combined one remain unchanged.
  • lightenReplacing light. As the resulting color, the primary or combined color is selected, depending on which one is lighter. Pixels with a darker color compared to the combined color are replaced, and pixels with a lighter color compared to the combined color remain unchanged.
  • color-dodgeLightening the foundation. The primary color is replaced by a brighter one to reflect the combined color as a result of a decrease in the contrast between the two colors. Mixing with black does not lead to any changes.
  • color-burnDimming the base. The primary color is replaced with a darker color to reflect the combined color as a result of increased contrast between the two colors. Mixing with white does not lead to any changes.
  • hard-lightDirectional light. In this mode, colors are multiplied or lightened depending on the combined color. The effect is similar to illuminating the image with the sharp light of a spotlight. If the combined color (light source) is lighter than 50% gray, then the image becomes lighter, as after brightening. This effect can be used to add highlights to the image. If the combined color (light source) is darker than 50% gray, then the image becomes darker, as after multiplication. This effect can be used to add dark areas to the image. Applying a pure black or pure white color results in a pure black or pure white color.
  • soft-lightScattered light. In this mode, the colors become darker or lighter depending on the combined color. The resulting effect is similar to illuminating the image with the blurry light of a spotlight. If the combined color (light source) is lighter than 50% gray, then the image becomes lighter, as after brightening. If the combined color is darker than 50% gray, the image becomes darker, as after darkening. Applying a pure black or pure white color creates distinct, darker or brighter areas, but pure black or white will not work.
  • differenceDifference. In this mode, either the combined color from the primary color or the primary color from the combined color is subtracted, depending on which color has a higher brightness value. Mixing with white color inverts the values ​​of the primary color, mixing with black color does not entail any changes.
  • exclusionAn exception. In this mode, an effect is created similar to that created in the “Difference” mode, but characterized by lower contrast. Blending with white color inverts the primary color values. Mixing with black does not lead to any changes.
  • hueTone. In this mode, the resulting color is created with the brightness and saturation of the primary color and the color tone of the combined color.
  • saturationSaturation. In this mode, the resulting color is created with the brightness and color tone of the main color and the saturation of the combined color.
  • colorColor. The resulting color is created with the brightness of the primary color and with the color tone and saturation of the combined color. This mode preserves gray levels in the image and can be used to colorize monochrome images and add hues to color images.
  • luminosityBrightness. In this mode, the resulting color is created with the color tone and saturation of the main color and the brightness of the combined color. This mode creates a color inversion effect.

Example

<div></div>
<div class="test"></div>
div {
   width: 300px;
   height: 226px;
   background-image: url('images/sunset.jpg');
   background-color: green;
   display: inline-block;
   margin: 10px;
}
.test {
   background-blend-mode: difference;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
XX3530228
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤373530228X