How to Blend Elements in CSS ?

Last Updated : 14 Oct, 2024

Blending elements in CSS refers to combining the visual content of multiple elements using blend modes. The mix-blend-mode and background-blend-mode properties allow you to blend backgrounds, images, and text, creating visually interesting effects similar to image editing software.

Blend modes are used to determine how two layers (color and/or image) are blend into each other. In this article, we will see how to blend an element using CSS.

Here we have some common approaches:

Table of Content

Using mix-blend-mode Property
Using background-blend-mode Property

1. Using mix-blend-mode Property

The mix-blend-mode property in CSS defines how an element’s content blends with the content beneath it. It allows for creative visual effects by combining background and element colors, similar to blending modes in image editing software like Photoshop.

Syntax

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

Example: The following example demonstrates the blend of HTML div element with one background image which is mentioned in the CSS part.

HTML

<!DOCTYPE html>
<html>

<head>

    <style>
        .divName1 {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210622101607/image1.png");
            text-align: center;
            background-size: 1400px 360px;
        }

        .divName1 h3 {
            margin: 0;
            font-size: 4.8rem;
            text-transform: uppercase;
            line-height: 1.9;
            color: green;
            mix-blend-mode: multiply;
        }
    </style>

</head>

<body>
    <center>
        <div class="divName1">
            <h3>Geeks for Geeks</h3>
        </div>
    </center>
</body>

</html>

Output:

2. Using background-blend-mode Property

The background-blend-mode property in CSS controls how an element's background layers blend together. When multiple background images or colors are applied, this property specifies how they interact, enabling creative effects like overlaying textures or adjusting color combinations.

Syntax

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

Example: This example uses background-blend-mode: multiply to combine two background images in the <div> element. The resulting blend creates a unique visual effect using a circle and a dog image.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        #divName1 {
            width: 400px;
            height: 400px;
            background-repeat: no-repeat;
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/20210622101952/circle.png"),
url("https://media.geeksforgeeks.org/wp-content/uploads/20210622102302/dog1.png");
            background-blend-mode: multiply;
        }
    </style>
</head>

<body>
    <center>
        <h2> background-blend-mode</h2>
        <div id="divName1"></div>
    </center>
</body>

</html>