CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

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



ADVERTISEMENT
ADVERTISEMENT