background-blend-mode property Archives

The CSS background-blend-mode property specifies the blending mode of each background layer (colour and/or image).

Syntax:

background-blend-mode: multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity|normal;

normal (default) – sets the blending mode to normal.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#normal { 
  width: 320px;
  height: 240px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
  background-blend-mode: normal;
}
</style>
</head>
<body>

<div id="normal"></div>

</body>
</html>

Output:

multiply – sets the blending mode to multiply.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#multiply { 
  width: 320px;
  height: 240px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
  background-blend-mode: multiply;
}
</style>
</head>
<body>

<div id="multiply"></div>

</body>
</html>

Output:

screen – sets the blending mode to screen.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#screen { 
  width: 320px;
  height: 240px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
  background-blend-mode: screen;
}
</style>
</head>
<body>

<div id="screen"></div>

</body>
</html>

Output:

overlay – sets the blending mode to overlay.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#overlay { 
  width: 320px;
  height: 240px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
  background-blend-mode: overlay;
}
</style>
</head>
<body>

<div id="overlay"></div>

</body>
</html>

Output:

darken – sets the blending mode to darken.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#darken { 
  width: 320px;
  height: 240px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
  background-blend-mode: darken;
}
</style>
</head>
<body>

<div id="darken"></div>

</body>
</html>

Output:

lighten – sets the blending mode to lighten.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#lighten { 
  width: 320px;
  height: 240px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
  background-blend-mode: lighten;
}
</style>
</head>
<body>

<div id="lighten"></div>

</body>
</html>

Output:

color-dodge – sets the blending mode to color-dodge.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#color-dodge { 
  width: 320px;
  height: 240px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
  background-blend-mode: color-dodge;
}
</style>
</head>
<body>

<div id="color-dodge"></div>

</body>
</html>

Output:

saturation – sets the blending mode to saturation.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#saturation { 
  width: 320px;
  height: 240px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
  background-blend-mode: saturation;
}
</style>
</head>
<body>

<div id="saturation"></div>

</body>
</html>

Output:

color – settles the blending mode to colour.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#color { 
  width: 320px;
  height: 240px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
  background-blend-mode: color;
}
</style>
</head>
<body>

<div id="color"></div>

</body>
</html>

Output:

luminosity – sets the blending mode to luminosity.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#luminosity { 
  width: 320px;
  height: 240px;
  background-repeat: no-repeat, repeat;
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/frame.png"), url("https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg");
  background-blend-mode: luminosity;
}
</style>
</head>
<body>

<div id="luminosity"></div>

</body>
</html>

Output:

Enjoy coding!