Background Blend Mode Property in CSS

This background-blend-mode property defines the blending mode of each background layer color and/or image.

value	used for
normal	This is the default value. It sets the blending mode to normal.
multiply	This leads to a darker image than before.
screen	In this mode both image and color is inverted, multiplied and then inverted. again.
overlay	In this mode, the background-color is mixed with the background-image to reflect the lightness or darkness of the backdrop.
darken	In this mode if the background-image is darker than the background-color then the image is replaced
lighten	In this mode if the background-image is lighter than the background-color then the image is replaced.
color-dodge	In this mode, the background-color is divided by the inverse of the background-image. This is very similar to the screen blend mode.
color	Sets the blending mode to color
luminosity	In this mode, the luminosity of the top color is preserved whilst using the saturation and hue of the background-color.
saturation	This mode keeps the saturation of the background-image whilst mixing the hue and luminosity of the background color.
Difference	This mode is the result by subtracting the darker color of the background-image and the background-color from the lightest one. Often the image will have very high contrast.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Blend</title>
  <style>
    div{
      width:500px;
      height: 500px;
      border: 2px solid #332;
      background-image: linear-gradient(red,yellow),url('bg.jpg');
      background-size: cover;
      background-blend-mode: normal;
      background-blend-mode: screen;
      background-blend-mode: overlay;
      background-blend-mode: darken;
      background-blend-mode: hard-light;
      background-blend-mode: soft-light;
      background-blend-mode: multiply;
      background-blend-mode: color-burn;
      background-blend-mode: difference;
      background-blend-mode: exclusion;
      background-blend-mode: hue;
      background-blend-mode: color;
      background-blend-mode: saturation;
      background-blend-mode: luminosity;
    }
  </style>
</head>
<body>
  <h2> background-blend in CSS</h2>
  <div>
  
  </div>
</body>
</html>

<!--
normal
screen
overlay
darken
hard-light
soft-light
multiply
color-burn
difference
exclusion
hue
color
saturation
luminosity
-->

Output

Background Blend Mode Property in CSS

Source Code :

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects