CSS background-blend-mode Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.backgroundBlendMode

Interactive Demo

background-blend-mode: normal;

background-blend-mode: multiply;

background-blend-mode: hard-light;

background-blend-mode: difference;

background-blend-mode: color-burn;

background-blend-mode: saturation;

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

HTML

<div></div>

<div class="test"></div>

CSS

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

Result

Editor