The background-blend-mode CSS property is used to specify how the background images of an element should blend with each other and with the element’s background colour.
It allows you to create interesting visual effects by controlling the blending mode of the background layers.
The background-blend-mode property takes a blending mode value, which determines how the colours of the background layers are combined. The blending modes available include standard modes such as normal, multiply, screen, overlay, and more. These modes affect how the colours of the background layers interact, creating different visual effects.
Here’s an example of how the background-blend-mode property can be used in CSS:
.element {
background-image: url('background-image.jpg'), linear-gradient(to right, red, yellow);
background-color: #fff; /* Fallback background color */
background-blend-mode: multiply;
}
In this example, the element has a background composed of an image (background-image.jpg) and a linear gradient. The background-blend-mode: multiply; is applied, which means the colours from the image and gradient will be multiplied together, creating a blended effect.
Here’s another example
Remember that browser support may vary for this property, so it’s a good practice to check compatibility if you plan to use it in production.
