CSS Blend Modes Explained

Background Blend Modes

Udnerstanding Blend Modes

According to the Wikipedia definition:

Blend modes in digital image editing and computer graphics determine how two layers are combined with each other. In most aplpications, the default blend mode simply hides the bottom layer with whatever exists in the top layer. Since each pixel contains numerical values, there are numerous other methods for blending two layers together.

Most modern browsers now support a wide range of blend modes. However, Internet Explorer and Edge lack support, and Safari does not handle composite effect blend modes. Feature queries can be used to provide fallbacks where needed. Check Can I Use for the latest browser compatibility information regarding CSS background-blend-mode.

Blending Two Background Images


<html>
    <head>
        <style>
            .overlay-container {
                min-height: 450px;
                background-image: url(mountain.jpg), url(mountain.jpg);
                background-size: cover;
                background-repeat: no-repeat;
                background-position: -25vw, 25vw;
                background-blend-mode: multiply;
            }
        </style>
    </head>
    <body>
        <div class="overlay-container"></div>
    </body>
</html>

Applying Color to Grayscale Images


<html>
    <head>
        <style>
            .colorized {
                min-height: 450px;
                background-image: url(forest.jpg);
                background-color: #2a5a7c;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                background-blend-mode: luminosity;
            }
        </style>
    </head>
    <body>
        <div class="colorized"></div>
    </body>
</html>

The luminosity blend mode combines the brightness values of the foreground layer (the forest image) with the hue and saturation of the background layer (the teal color). The result preserves the original color palette from the background while adopting the luminance information from the image, creating a uniquely colored effect.

Available Blend Modes

CSS supports 15 different blend modes that can be applied to various use cases.

Adding Texture Overlays


<html>
    <head>
        <style>
            .textured {
                min-height: 450px;
                background-image: url(grain.png), url(portrait.jpg);
                background-size: 180px, cover;
                background-repeat: repeat, no-repeat;
                background-position: center center;
                background-blend-mode: soft-light;
            }
        </style>
    </head>
    <body>
        <div class="textured"></div>
    </body>
</html>

Using Mix-Blend-Mode for Element Overlays


<html>
    <head>
        <style>
            .hero-section {
                background-image: url(landscape.jpg);
                background-size: cover;
                background-position: center;
                padding: 12em 0 2em;
            }

            .hero-section h1 {
                margin: 0;
                font-family: 'Segoe UI', Arial, sans-serif;
                font-size: 5rem;
                text-align: center;
                mix-blend-mode: hard-light;
                background-color: #e74c3c;
                color: #666666;
                padding: 0.2em 0;
                border: 0.1em solid #bbbbbb;
            }
        </style>
    </head>
    <body>
        <div class="hero-section">
            <h1>Big Bear</h1>
        </div>
    </body>
</html>

Reference Materials

For deeper understanding of how CSS background-blend-mode works internally, consult the official documentation and related technical specifications.

Tags: css blend-modes background-blend-mode mix-blend-mode css-background

Posted on Wed, 23 Sep 2026 16:07:04 +0000 by xtian

Freaks City