next → ← prev

CSS background-blend-mode

This CSS property sets the blend mode for each background layer (image/color) of an element. It defines how the background image of an element blends with the background color of the element. We can blend the background images together or can blend them with background-color.

This property is not supported in Edge/Internet Explorer.

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 property has numerous property values. Let's discuss the above blend modes with an example of each.

normal

It is the default value which sets the property mode to normal.

multiply

It multiplies the background-color and background-images and leads to a darker image than before. It is used to set the blending mode 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("lion.png"), url("forest.jpg");
  background-blend-mode: multiply;
  
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: multiply; </h2>
<div id="example"></div>
</center>
</body>
</html>

screen

It is used to set the blending mode to screen and inverts both image and color. This effect is like displaying two images on the 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("lion.png"), url("forest.jpg");
  background-blend-mode: screen;
  
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: screen; </h2>
<div id="example"></div>
</center>
</body>
</html>

color-dodge

It is similar to the screen blend mode. It is used to set the blending mode to color-dodge. The final result of this mode is the result of dividing the background-color by the inverse of the background-image.

Example

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

difference

It is used to set the blending mode to difference. Its final result is the result of subtracting the dark color from the 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("lion.png"), url("forest.jpg");
  background-blend-mode: difference;
  
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: difference; </h2>
<div id="example"></div>
</center>
</body>
</html>

darken

It is used to set the blending mode 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("lion.png"), url("forest.jpg");
  background-blend-mode: darken;
  
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: darken; </h2>
<div id="example"></div>
</center>
</body>
</html>

lighten

It is used to set the blending mode 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("lion.png"), url("forest.jpg");
  background-blend-mode: lighten;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: lighten; </h2>
<div id="example"></div>
</center>
</body>
</html>

Saturation

Its final result is the saturation of the top color, while using the hue and luminosity of the bottom 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("lion.png"), url("forest.jpg");
  background-blend-mode: saturation;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: saturation; </h2>
<div id="example"></div>
</center>
</body>
</html>

luminosity

It is used to set the blending mode to luminosity. Its final result is the luminosity of the top color, while using the hue and saturation of the bottom 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("lion.png"), url("forest.jpg");
  background-blend-mode: luminosity;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: luminosity; </h2>
<div id="example"></div>
</center>
</body>
</html>

overlay

It is used to set the blending mode 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("lion.png"), url("forest.jpg");
  background-blend-mode: overlay;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: overlay; </h2>
<div id="example"></div>
</center>
</body>
</html>

hard-light

It is used to set the blending mode to 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("lion.png"), url("forest.jpg");
  background-blend-mode: hard-light;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: hard-light; </h2>
<div id="example"></div>
</center>
</body>
</html>

soft-light

It is used to set the blending mode to 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("lion.png"), url("forest.jpg");
  background-blend-mode: soft-light;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: soft-light; </h2>
<div id="example"></div>
</center>
</body>
</html>

exclusion

It is used to set the blending mode 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("lion.png"), url("forest.jpg");
  background-blend-mode: exclusion;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: exclusion; </h2>
<div id="example"></div>
</center>
</body>
</html>

hue

Its result is the combination of the hue of the background-image with the luminosity and saturation of the 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("lion.png"), url("forest.jpg");
  background-blend-mode: hue;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: hue; </h2>
<div id="example"></div>
</center>
</body>
</html>

color-burn

It is used to set the blending mode 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("lion.png"), url("forest.jpg");
  background-blend-mode: color-burn;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: color-burn; </h2>
<div id="example"></div>
</center>
</body>
</html>

color

It is used to set the blending mode to color. It keeps the luminosity of the background-color and the hue and saturation of the background-image.

Example

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

Next TopicCSS Radio Button

← prev next →

Latest Courses

Data-Structures

Cloud-Computing

Ethical-Hacking

We provides tutorials and interview questions of all technology like java tutorial, android, java frameworks

Contact info

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

[email protected].

Follow us

Tutorials

Java Data Structures C Programming C++ Tutorial C# Tutorial PHP Tutorial HTML Tutorial JavaScript Tutorial jQuery Tutorial Spring Tutorial

Interview Questions

Tcs Intuit Wipro Adobe Infosys Amazon Accenture Cognizant Capgemini Microsoft

Online Compiler

C R C++ Php Java Html Swift Python JavaScript TypeScript

© Copyright 2024 Javatpoint. All Rights Reserved.