Skip to content
Related Articles

Related Articles

Improve Article

How to blend elements in CSS ?

  • Last Updated : 24 Jun, 2021

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.

Approach: In CSS, there are two properties that allow us to blend color and/or image together:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

1. Using mix-blend-mode Property: The mix-blend-mode property is used to blend between the element and the element(s) that are behind it.



 

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(
            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:

Output Of The Code

2. Using background-blend-mode Property: The background-blend-mode property is used to blend the background image and its background color elements.

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: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        #divName1 {
            width: 400px;
            height: 400px;
            background-repeat: no-repeat;
            background-image: 
            background-blend-mode: multiply;
        }
    </style>
</head>
  
<body>
    <center>
        <h2> background-blend-mode</h2>
        <div id="divName1"></div>
    </center>
</body>
  
</html>

Output:

Output Of The Code




My Personal Notes arrow_drop_up
Recommended Articles
Page :