mix-blend-mode

Description
Syntax
Examples
Links

Description

The mix-blend-mode property for CSS defines the formula that must be used to mix the colors with the backdrop.

Syntax

CSS

mix-blend-mode: value;

JS

object.style.mixBlendMode = "value";

Values

<'mix-blend-mode'> = <blend-mode>

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

normal

This is the default attribute which specifies no blending. The blending formula simply selects the source color.

multiply

The source color is multiplied by the destination color and replaces the destination.

screen

Multiplies the complements of the backdrop and source color values, then complements the result.

overlay

Multiplies or screens the colors, depending on the backdrop color value.

darken

Selects the darker of the backdrop and source colors.

lighten

Selects the lighter of the backdrop and source colors.

color-dodge

Brightens the backdrop color to reflect the source color. Painting with black produces no changes.

color-burn

Darkens the backdrop color to reflect the source color. Painting with white produces no change.

hard-light

Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop.

soft-light

Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop.

difference

Subtracts the darker of the two constituent colors from the lighter color.

exclusion

Produces an effect similar to that of the Difference mode but lower in contrast. Painting with white inverts the backdrop color; painting with black produces no change.

hue

Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color.

saturation

Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change.

color

Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images.

luminosity

Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode.

Initial

normal

Examples

1 · color

2 · color-burn

3 · color-dodge

4 · darken

5 · difference

6 · exclusion

7 · hard-light

8 · hue

9 · lighten

10 · luminosity

11 · multiply

12 · normal

13 · overlay

14 · saturation

15 · screen

16 · soft-light

17 · JS

<!doctype html>
<html>
<head>
    <style>
        div
        {
            height: 100%;
            position: absolute;
            width: 100%;
        }
        .myclass1
        {
            background-image: repeating-linear-gradient(black, black 10px, white 10px, white 20px, red 20px, red 30px, green 30px, green 40px, blue 40px, blue 50px);
        }
        .myclass2
        {
            background-image: repeating-linear-gradient(90deg, black, black 10px, white 10px, white 20px, red 20px, red 30px, green 30px, green 40px, blue 40px, blue 50px);
        }
        .myclass3
        {
            background-image: url("/assets/svg/Happy100.svg");
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>color</button>
    <button>color-burn</button>
    <button>color-dodge</button>
    <button>darken</button>
    <button>difference</button>
    <button>exclusion</button>
    <button>hard-light</button>
    <button>hue</button>
    <button>lighten</button>
    <button>luminosity</button>
    <button>multiply</button>
    <button>normal</button>
    <button>overlay</button>
    <button>saturation</button>
    <button>screen</button>
    <button>soft-light</button>
    <div class="myclass1">mix-blend-mode</div>
    <div class="myclass2">mix-blend-mode</div>
    <div class="myclass3">mix-blend-mode</div>
    <script>
        function myfunction(myparameter)
        {
            for(const mydiv of document.querySelectorAll("div"))
            {
                mydiv.style.mixBlendMode = myparameter.target.innerHTML;
            }
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>