CSS - tutorial - 23 - blend modes

Revision:

Content

CSS blend modes allow to add blend modes to elements background-blend-mode mix-blend-mode

CSS blend modes allow to add blend modes to elements

top

These blend modes specify a blending effect when two elements overlap — the final color shown for each pixel will be the result of a combination of the original pixel color, and that of the pixel in the layer underneath it.

There are two properties that use blend modes in CSS:

background-blend-mode, which blends together multiple background images and colors set on a single element.
mix-blend-mode, which blends together the element it is set on with elements it is overlapping — both background and content.

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

Values:

normal : the final color is the top color, regardless of what the bottom color is. The effect is like two opaque pieces of paper overlapping.
multiply : 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.
screen : 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.
overlay : 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.
darken : the final color is composed of the darkest values of each color channel.
lighten : the final color is composed of the lightest values of each color channel.
color-dodge : 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.
color-burn : 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.
hard-light : 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.
soft-light : 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*.*
difference : 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.
exclusion : 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.
hue : the final color has the hue of the top color, while using the saturation and luminosity of the bottom color.
saturation : 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.
color : 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.
luminosity : 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.

Blend mode comparision

example: blend-modes - choose a blend-mode
code: 
                    <div class="one">    
                        <select>
                            <option selected>normal</option>
                            <option>multiply</option>
                            <option>screen</option>
                            <option>overlay</option>
                            <option>darken</option>
                            <option>lighten</option>
                            <option>color-dodge</option>
                            <option>color-burn</option>
                            <option>hard-light</option>
                            <option>soft-light</option>
                            <option>difference</option>
                            <option>exclusion</option>
                            <option>hue</option>
                            <option>saturation</option>
                            <option>color</option>
                            <option>luminosity</option>
                        </select>
                    </div>
                    <style>
                        div .one{ width: 30vw; height: 30vw; top: 3vw; background: url("../pics/smiley.png") no-repeat center, 
                        linear-gradient(to bottom, blue, orange);}
                    </style>
                    <Script>
                        const selectElem = document.querySelector("select");
                        const divElem = document.querySelector(".one");
                        selectElem.addEventListener("change", () => {
                        divElem.style.backgroundBlendMode = selectElem.value;
                        });
                    </Script>

background-blend-mode

top

The background-blend-mode property defines the blending mode of each background layer (color and/or image).

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: background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Syntax examples: 

            /* 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;

example: background-blend-mode
multiply
screen
overlay
darken
color-dodge
saturation
color
luminosity
lighten
normal
none
multiply, screen
overlay, darken
color-dodge, saturation
color, luminosity
lighten, normal
code: 
                    <div class="box">
                        <div id="div1">multiply</div>
                        <div id="div2">screen</div>
                        <div id="div3">overlay</div>
                        <div id="div4">darken</div>
                        <div id="div5">color-dodge</div>
                        <div id="div6">saturation</div>
                        <div id="div7">color</div>
                        <div id="div8">luminosity</div>
                        <div id="div9">lighten</div>  
                        <div id="div10">normal</div>
                        <div id="div11">none</div>
                        <div id="div12">multiply, screen</div>
                        <div id="div13">overlay, darken</div>
                        <div id="div14">color-dodge, saturation</div>
                        <div id="div15">color, luminosity</div>
                        <div id="div16">lighten, normal</div>
            
                    </div>
                    <style>
                    .box{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;}
                    #div1 { width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                    background-blend-mode: multiply; color: red;}
                    #div2 { width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                        background-blend-mode: screen; color: red;}
                    #div3 { width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                        background-blend-mode: overlay; color: red;}
                    #div4 { width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                        background-blend-mode: darken; color: red;}
                    #div5 { width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                        background-blend-mode: color-dodge; color: red;}
                    #div6 { width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                        background-blend-mode: saturation; color: red;}
                    #div7 { width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                        background-blend-mode: color; color: red;}
                    #div8 { width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                        background-blend-mode: luminosity; color: red;}
                    #div9 { width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                        background-blend-mode: lighten; color: red;}
                    #div10 { width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                        background-blend-mode: normal; color: red;}
                    #div11{ width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  color: red;}
                    #div12{ width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png"); 
                        background-blend-mode: multiply, screen; color: red;}
                    #div13{ width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                        background-blend-mode: ovewrlay, darken; color: red;}
                    #div14{ width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                        background-blend-mode: color-dodge, saturation; color: red;}
                    #div15{ width: 10vw; height: 10vw; background-repeat: no-repeat, repeat; 
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png"); 
                        background-blend-mode: color, luminosity; color: red;}
                    #div16{ width: 10vw; height: 10vw; background-repeat: no-repeat, repeat;
                        background-image: url("../pics/smiley.png"), url("../pics/fb36.png");  
                        background-blend-mode: lighten, mormal; color: red;}
                    </style>
example: gradients
code: 
                    <div>
                        <div class="container-1"></div>
                    </div>
                    <style>
                        .container-1{ width: 30vw; height: 20vw; background: linear-gradient(purple 0%, red 90%), 
                            linear-gradient(to right, purple 0%, yellow 90%), url('smiley.png') 3vw, url('search.png') 
                            repeat-x 1vw; background-blend-mode: screen, difference, lighten;}
                    </style>

mix-blend-mode

top

The mix-blend-mode property specifies how an element's content should blend with its direct parent's background.

Syntax: mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

example: mix-blend-mode>
Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple
code: 
                    <div class="container">
                        <img src="../pics/smiley.png" alt="Pineapple" class="normal" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="multiply" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="screen" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="overlay" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="darken" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="lighten" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="color-dodge" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="color-burn" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="difference" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="exclusion" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="hue" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="saturation" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="color" width="200" height="200">
                        <img src="../pics/smiley.png" alt="Pineapple" class="luminosity" width="200" height="200">
                    </div>
                    <style>
                        .container {background-color: red; height: 45vw;}
                        img {width: 20%; height: auto; float: left;}
                        .normal {mix-blend-mode: normal;}
                        .multiply {mix-blend-mode: multiply;}
                        .screen {mix-blend-mode: screen;}
                        .overlay {mix-blend-mode: overlay;}
                        .darken {mix-blend-mode: darken;}
                        .lighten {mix-blend-mode: lighten;}
                        .color-dodge {mix-blend-mode: color-dodge;}
                        .color-burn {mix-blend-mode: color-burn;}
                        .difference {mix-blend-mode: difference;}
                        .exclusion {mix-blend-mode: exclusion;}
                        .hue {mix-blend-mode: hue;}
                        .saturation {mix-blend-mode: saturation;}
                        .color {mix-blend-mode: color;}
                        .luminosity {mix-blend-mode: luminosity;}
                    </style>
example: mix-blend-mode with image

Outdoor Club

code; 
                    <div class="container-2">
                        <div class="img-wrap">
                            <img src="../pics/4.jpg"/>
                        <h4>Outdoor Club</h4>
                        </div>
                    </div>
                    <style>
                        .container-2{width: 50vw; height: 60vh; background: repeating-linear-gradient( -45deg,  
                            #222, #222 1vw, #333 1vw, #333 2vw)}
                        h4 { margin-bottom: 7rem; position: absolute;  top: 45%; right: 0; left: 0; margin: auto; 
                            text-align: center; font-size: 4rem; padding: .5em .25em;color: #007eae; 
                            text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay;}
                        .img-wrap {width: 45%; padding: 1%; position: relative;isolation: isolate;  
                            margin: 0 auto;}
                        .img-wrap img {width: 40vw;height: 50vh; mix-blend-mode: multiply; 
                            margin-left: -10vw;}  
                    
                    </style>
example: mix-blend-mode with shapes
code: 
                    <div>
                        <svg>
                            <g class="isolate">
                            <circle cx="90" cy="160" r="90" fill="red"/>
                            <circle cx="150" cy="90" r="90" fill="lime"/>
                            <circle cx="220" cy="170" r="90" fill="blue"/>
                            </g>
                        </svg>
                    </div>
                    <style>
                        svg{height: 40vh; width: 40vw;border: 0.1vw solid black;}
                        circle { mix-blend-mode: screen;}  
                        .isolate {isolation: isolate;} 
                        /* if this was not isolated, the gray background would impact the outcome */ 
                    </style>