CSS background-blend-mode

The CSS background-blend-mode property allows you to blend the background image of an element with its background color or other background images. It creates various blending effects by applying blending modes similar to those found in photo editing software.

The background-blend-mode property works by blending the pixel values of the background images with the pixel values of the background color or other background images, resulting in different visual effects.

The syntax for the background-blend-mode property is as follows:

selector {
  background-blend-mode: value;
}

• selector: Represents the HTML element or class to which the background-blend-mode property will be applied.
• value: Specifies the blending mode to be used. It can take one of the following values:
• normal: The default value. The background images and background color are not blended, and they appear as they are stacked on top of each other.
• multiply: Multiplies the color values of the background image with the color values of the background color or other background images. It creates a darker result.
• screen: Inversely multiplies the color values of the background image with the color values of the background color or other background images. It creates a lighter result.
• overlay: Combines the multiply and screen blending modes, resulting in a high contrast effect.
• color-dodge: Brightens the background image based on the color values of the background color or other background images.
• color-burn: Darkens the background image based on the color values of the background color or other background images.
• hard-light: Applies multiply to dark colors and screen to light colors, creating a strong contrast effect.
• soft-light: Softens the colors of the background image based on the color values of the background color or other background images.
• difference: Subtracts the color values of the background image from the color values of the background color or other background images, resulting in an inverted effect.
• exclusion: Similar to difference, but with a more subtle effect.

Example:

div {
  background-image: url('image.jpg');
  background-color: #ff0000;
  background-blend-mode: multiply;
}

In this example, the <div> element has a background image (image.jpg) and a background color (#ff0000). The background-blend-mode is set to multiply, causing the red background color to multiply with the background image, resulting in a darker red overall.

The background-blend-mode property is a powerful tool for creating visually engaging and artistic effects, especially when combining images and colors in creative ways. It can be used to create overlays, color filters, and subtle image manipulations directly in CSS.

However, not all blending modes are supported in all browsers, especially older versions. Be sure to check browser compatibility and provide fallback styles when using background-blend-mode to ensure a consistent experience across different environments.