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 →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk tutorial

Splunk

SPSS

Swagger tutorial

Swagger

Transact-SQL

Tumblr tutorial

Tumblr

ReactJS

Regex

Reinforcement learning tutorial

Reinforcement Learning

R Programming tutorial

R Programming

RxJS

React Native tutorial

React Native

Python Design Patterns

Python Design Patterns

Python Pillow tutorial

Python Pillow

Python Turtle tutorial

Python Turtle

Keras

Preparation

Aptitude

Logical Reasoning

Reasoning

Verbal Ability

Interview Questions

Company Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

Artificial Intelligence

AWS

Selenium tutorial

Selenium

Cloud Computing

Cloud Computing

Hadoop tutorial

Hadoop

ReactJS Tutorial

ReactJS

Data Science Tutorial

Data Science

Angular 7 Tutorial

Angular 7

Blockchain Tutorial

Blockchain

Git

Machine Learning Tutorial

Machine Learning

DevOps Tutorial

DevOps

B.Tech / MCA

DBMS

Data Structures tutorial

Data Structures

DAA

Operating System

Operating System

Computer Network tutorial

Computer Network

Compiler Design tutorial

Compiler Design

Computer Organization and Architecture

Computer Organization

Discrete Mathematics Tutorial

Discrete Mathematics

Ethical Hacking

Ethical Hacking

Computer Graphics Tutorial

Computer Graphics

Software Engineering

Software Engineering

Web Technology

Cyber Security tutorial

Cyber Security

Automata Tutorial

Automata

C Language tutorial

C Programming

C++

Java

.Net Framework tutorial

.Net

Python tutorial

Python

List of Programs

Programs

Control Systems tutorial

Control System

Data Mining Tutorial

Data Mining

Data Warehouse Tutorial

Data Warehouse

^{Like/Subscribe us for latest updates or newsletter}

Subscribe to Get Email Alerts

YouTube