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 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.

Divi in CSS

Divi is popular WordPress themes due to its versatility and user-friendly interface. It includes a built-in page builder for sophisticated design options and an assortment of customization features to help...

9 minutes read.

CSS Superscript and Subscript

Superscript and Subscript To specify the superscript and the subscript text, HTML provides us two tags that are <sup> and <sub>. The superscript content looks in the shorter font and half...

2 minutes read.

What is Bootstrap CSS?

Bootstrap: - Bootstrap is a CSS framework that is free to use and is used for the front-end development of the website in a faster and easier way. Bootstrap was released as...

3 minutes read.

CSS Units

CSS Units In CSS, there are so many units available to show the length’s measurement. A single unit of CSS is applied to examine the size of the property, which the...

5 minutes read.

CSS Border

CSS Border: The border property of CSS allows us to define the style, color, width, and radius of the element’s border. It is applied to various elements to set-up the...

4 minutes read.

CSS Outline

CSS Outline: This CSS property is quite similar to the border property of CSS. It eases us to design an additional border around the element to obtain visual attention. The...

4 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 Loader

CSS Loader The loader is the animation that can alert a visitor regarding the loading of the page. We need to wait for some time. It will be helpful if any...

4 minutes read.

Radial-gradient() CSS function

Radial-gradient() CSS function It defines a CSS in-built function, which produces a smooth transition among multiple colors. It is used to set any radial-gradient that is same as a background-image. This...

4 minutes read.

Css Text Orientation

Introduction: The text-orientation property of CSS is used to specify the orientation of the text characters in the line of content. This property applies only with the vertical writing-mode and not...

4 minutes read.

CSS White Space Property

White Space in CSS The white-space CSS property describes how to show the content inside an element. This property is applied to manage a white space within an element. Values of White-space...

2 minutes read.

How to use google fonts in CSS

Fonts: - Fonts are used to make our website look more beautiful. Choosing appropriate font according to the web design or layout is also important. Many typefaces are accessible in...

4 minutes read.

CSS 3D Transform

Introduction To understand 3D transformation property of transform you need to first understand the difference between 2D and 3D transform. 2D transform is a CSS effect which transforms the elements according to...

6 minutes read.

CSS Color

CSS Colors: The CSS color property is used for setting the HTML element’s color. The color of the fonts and the color of the background can be set-up by using...

5 minutes read.

CSS Width

CSS Width The width property in CSS sets the content width of area of the element. These properties do not provide margin and border features. It is used to set the...

1 minute read.

CSS Tutorial

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...

9 minutes read.

CSS Text-Transform Property

Text-Transform in CSS The text-transform property permits us to alter the text case. It controls the capitalization of the text. This property is employed to design the text appearance in every...

3 minutes read.

What is CSS used for

What is CSS used for? CSS stands for Cascading Style Sheet. CSS is a stylesheet language for web pages. It specifies how a document created in a markup language looks and...

4 minutes read.

CSS Math Functions

The CSS math functions permit numerical articulations. These CSS math functions can particularly be utilized in maybe unforeseen ways, for example, inside angles and shading the functions and in the...

3 minutes read.