Logo
×

CSS Background-blend-mode

Background-blend-mode

The background-blend-mode property sets a blend mode of the component’s every background layer (color/image). It illustrates how the element background image blends well with the element background color. We can use this property to blend images in the background together or blend them with the background color.

The Edge/Internet Explorer does not provide its support to this property.

Syntax:

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

This CSS attribute has a huge number of property values, which are discussed and explained below.

normal: This value is a default value. It sets the mode of the property to normal.

multiply: It can multiply the background image and background color and manage the darker image as compared to before. It sets the mode of blending to multiply.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#div1 img{ 
width: 300px; 
height: 300px; 
} 
#example{  
  width: 400px; 
  height: 400px; 
  background-repeat: no-repeat; 
  background-image: url("Horse.png"), url("Water.jpg"); 
  background-blend-mode: multiply; 
} 
</style> 
</head> 
<body> 
<center> 
<div id = "div1"> 
<h2> Real Images </h2> 
<img src = "Horse.png"> 
<img src = "Water.jpg"> 
</div> 
<h2> background-blend-mode: multiply; </h2> 
<div id="example"></div> 
</center> 
</body> 
</html> 

Output:

CSS Background blend mode

Screen: It sets the mode of blending to screen and change both color and image. Its effect is similar as displaying two images over any projection screen.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: screen;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: screen; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

color-dodge: The screen mode is quite similar to this property value. It sets the mode of blending to color-dodge. This mode will produce the outcome by dividing the color of background by transposing the image in the background.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: color-dodge;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: color-dodge; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

difference: It sets the mode of blending to difference. This mode will produce the outcome by subtracting any dark color from any lightest one.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: difference;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: difference; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

darken: It sets the mode of blending to darken.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: darken;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: darken; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

lighten: It sets the mode of blending to lighten.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: lighten;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: lighten; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

saturation: Its ultimate result will be the color of top saturation, while with the use of luminosity and hue of the color of bottom.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: saturation;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: saturation; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

luminosity: This value sets the mode of blending to luminosity. Its ultimate result will be the color of top luminosity, while with the use of saturation and hue of the color of bottom.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: luminosity;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: luminosity; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

overlay: This property value sets the mode of blending to overlay.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: overlay;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: overlay; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

hard-light: This value sets the mode of blending to the hard-light.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: hard-light;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: hard-light; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

soft-light: This value sets the mode of blending to the soft-light.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: soft-light;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: soft-light; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

exclusion: It sets the mode of blending to exclusion.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: exclusion;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: exclusion; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

hue: Its outcome is the hue’s background-image combination along with the saturation and luminosity of any background-color.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: hue;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: hue; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

color-burn: It sets the mode of blending to color-burn.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: color-burn;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: color-burn; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

Color: It can set the mode of blending to color. It carries the saturation and hue of any background-image and any background-color’s luminosity.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img
{
 width: 300px;
 height: 300px;
}
#example
{
 width: 400px;
 height: 400px;
 background-repeat: no-repeat;
 background-image: url("Horse.png"), url("Water.jpg");
 background-blend-mode: color;
}
</style>
</head>
<body>
<center>
<div id= "div1">
<h2> Real Images </h2>
<img src= "Horse.png">
<img src= "Water.jpg">
</div>
<h2> background-blend-mode: color; </h2>
<div id= "example"></div>
</center>
</body>
</html>

Output:

CSS Background blend mode

Related Topics

CSS Word-spacing

Word-spacing The work-spacing property of CSS is applied to manage the space among the words. We can decrease or increase the space among the words by the use of this property. It...

3 minutes read.

CSS Lists

CSS Lists: Several properties are available in CSS that are used to manage the lists. Lists are distributed as ordered and unordered kind of lists. The ordered lists provide the...

7 minutes read.

CSS Pseudo-elements

Pseudo-elements The pseudo-classes in CSS can be represented as any keyword which is connected to the selector that represents any selected element’s unique state. On the other hand, pseudo-elements can be...

6 minutes read.

How to resize an image in CSS

How to resize an image in CSS? The resize image attribute is used in responsive web design to resize images to fit within the div container automatically. The resize image attribute...

3 minutes read.

CSS Font-Size

A Cascading Style Sheet (CSS) is a simple design scripting language intended to simplify the process of making web pages more visually appealing with the kind of high-level formatting. Cascading...

3 minutes read.

CSS Inline

What is CSS? CSS is an acronym for Cascading Style Sheets. CSS is the language that we use to style an HTML document. It specifies how HTML components should appear. CSS...

4 minutes read.

Hover condition for a:before and a:after in CSS

In CSS, :after and :before are used to add content after and before the element. The CSS pseudo-class is used to add some styling effect to the webpage. We can change...

4 minutes read.

Difference between HTML and CSS

HTML HTML stands for HyperText Markup Language and is used to create web pages and websites and web applications, which means we can create static web pages. Html is a scripting...

3 minutes read.

CSS Specificity

CSS Specificity: If one or more conflicting rules of CSS express a similar element, a browser will pursue a few rules to examine the specific one. Specificity can be specified...

3 minutes read.

CSS translate() Function

Translate() CSS function This function in CSS is a CSS in-built function. It relocates the element in the horizontal direction or in the vertical direction. It can move the items from...

2 minutes read.

CSS Background-blend-mode

Background-blend-mode The background-blend-mode property sets a blend mode of the component’s every background layer (color/image). It illustrates how the element background image blends well with the element background color. We can...

9 minutes read.

CSS Justify Content

Justify Content: These properties are applied for the alignment of items of a flexible box container if any item does not cover every available space over the main-axis, i.e., horizontally....

4 minutes read.

CSS Dropdowns

Dropdowns are one of the maximum crucial parts of an interactive internet site. CSS is a kind used to design the drop-down menus. A drop-down essentially is a group of...

5 minutes read.

CSS Margin

CSS Margin: The CSS margin property is employed to describe the space throughout the elements. It clears the range throughout the element. These properties do not have a background color...

2 minutes read.

What is CSS

CSS stands for Cascading Style Sheet. It gives an additional style to the HTML document. A cascading style sheet is a language that is designed to define the document formatting...

3 minutes read.

How to center a button in CSS

How to center a button in CSS? In the tutorial, we will learn how to center a button in CSS. CSS (Cascading Style Sheets) gives an HTML web page the greatest possible...

4 minutes read.

CSS Counters

CSS Counters: The CSS counter property is similar to the variables. CSS counters are controlled via CSS, and its values are incremented via rules of CSS to record how much...

4 minutes read.

CSS Gradient

CSS Gradient: The CSS gradient property is applied to show the smooth transition inside two specified colors or more than two specified colors. Need of CSS Gradient The following are a few...

4 minutes read.

CSS Float

CSS Float: The float property of CSS is the positioning property. This property is applied to elements to push them either to left or right. It permits for wrapping facility...

4 minutes read.

Cascading Style Sheet

CSS refers to the Cascading Style Sheet. CSS is a form of a programming language. In other words, CSS is a language of the style sheet that is utilised for...

7 minutes read.