Less.js Color Blending overlay() Function

Last Updated : 06 Oct, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is more functional because of this dynamic style sheet language. Cross-browser interoperability is a feature of LESS. A computer language known as the CSS pre-processor is used to enhance and compile CSS so that web browsers may use it. Aside from that, it is a CSS language extension that provides features like variables, functions, mixins, and operations that let us create dynamic CSS while preserving backward compatibility.

Less.js Color Blending overlay() function is the combination of the multiply function and the screen functions. This means that this function conditionally makes light channels lighter and darker channels darker

Syntax:

overlay(color1, color2)

Parameters:

color1: This is the first compulsory parameter which is a base color object, it can be a hex value, RGB value, HSL, or HSV value. This first color object is the primary determinant for the making of the resultant color if it will be lighter or darker.
color2: This is the second compulsory parameter which is an overlay color object, it can be a hex value, RGB value, HSL, or HSV value.

Compile LESS code into CSS code

Example 1: The code below demonstrates the usage and implementation of the Color blending overlay() function.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet"
        type="text/css" href="style.css" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Less.js Color Blending overlay() Function</h3> 
      
    <div class="flex-container"> 
        <div class="c1"> 
            <p>(Base color)<br>rgb(0, 153, 200)</p> 
        </div><br> 
  
        <div class="c2"> 
            <p>(Overlay)<br>rgb(240, 36, 60)</p> 
        </div><br> 
    </div> 
      
    <div class="result"> 
        <p>(Resultant) <br> #e12b5e</p> 
    </div> 
</body> 
  
</html>

styles.less: This is compiled into a CSS file which is given further below.

styles.less

/* styles.less */
@body-bg-color: #eeeeee; 
@color2: rgb(0, 153, 200); 
@color1: rgb(240, 36, 60); 
  
.flex-container { 
    display: flex; 
    flex-direction: row; 
} 
  
.c1 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: @color1; 
} 
  
.c2 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: @color2; 
} 
  
.result { 
    width: 250px; 
    height: 150px; 
    margin: 3rem; 
    background-color: overlay(@color1, @color2); 
} 
  
p { 
    padding: 50px 0px 0px 20px; 
}

style.css: The CSS output of the above less file was compiled.

style.css

/* styles.less */
.flex-container { 
    display: flex; 
    flex-direction: row; 
} 
  
.c1 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #f0243c; 
} 
  
.c2 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #0099c8; 
} 
  
.result { 
    width: 250px; 
    height: 150px; 
    margin: 3rem; 
    background-color: #e12b5e; 
} 
  
p { 
    padding: 50px 0px 0px 20px; 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Color Blending overlay() function with the if() and boolean logical functions.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="style.css" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Less.js Color Blending overlay() Function</h3> 
      
    <div class="flex-container"> 
        <div class="c1"> 
            <p>(Base color)<br>rgb(220, 43, 55)</p> 
        </div><br> 
        <div class="c2"> 
            <p>(Overlay)<br>rgb(0, 200, 100)</p> 
        </div><br> 
    </div> 
    <div class="result"> 
        <p>(Resultant) <br> #b9432b</p> 
    </div> 
</body> 
  
</html>

styles.less: This is compiled into a CSS file which is given further below.

styles.less

@body-bg-color: #eeeeee; 
@color2: rgb(0, 200, 100); 
@color1: rgb(220, 43, 55); 
@resultant: overlay(@color1, @color2); 
@cond1: boolean(saturation(@resultant) > 50%); 
  
.flex-container { 
    display: flex; 
    flex-direction: row; 
} 
  
.c1 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: @color1; 
} 
  
.c2 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: @color2; 
} 
  
.result { 
    width: 250px; 
    height: 150px; 
    margin: 3rem; 
    background-color: if(@cond1, @resultant, @color2); 
} 
  
p { 
    padding: 50px 0px 0px 20px; 
}

styles.css: The CSS output of the above Less file was compiled.

styles.css

.flex-container { 
    display: flex; 
    flex-direction: row; 
} 
  
.c1 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #dc2b37; 
} 
  
.c2 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #00c864; 
} 
  
.result { 
    width: 250px; 
    height: 150px; 
    margin: 3rem; 
    background-color: #b9432b; 
} 
  
p { 
    padding: 50px 0px 0px 20px; 
}