![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS background-blend-mode Property
![CSS background-blend-mode Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-background-blend-mode.webp)
Photo Credit to CodeToFun
🙋 Introduction
The background-blend-mode
property in CSS allows web developers to control how multiple background images are blended together.
This property defines the blending mode for each layer, making it possible to create complex visual effects by combining colors and images in different ways.
💡 Syntax
The background-blend-mode
property is applied to an element that has multiple background layers. The syntax is as follows:
element {
background-blend-mode: blend-mode;
}
Here, blend-mode can be one of several predefined values that determine how the background layers interact.
🎛️ Default Value
The default value of the background-blend-mode
property is normal, which means that the background layers are simply stacked without any blending.
🏠 Property Values
Value | Description |
---|---|
normal | The default behavior, where background layers are displayed as they are. |
multiply | Multiplies the colors of the background layers, resulting in a darker effect. |
screen | The inverse of multiply, resulting in a lighter effect. |
overlay | Combines multiply and screen to preserve the highlights and shadows of the background layers. |
darken | Displays the darker colors from the background layers. |
lighten | Displays the lighter colors from the background layers. |
color-dodge | Brightens the background layers, making the colors more intense. |
color-burn | Darkens the background layers, increasing the contrast. |
hard-light | Simulates a strong light source, combining multiply and screen. |
soft-light | Similar to hard-light, but with softer edges and transitions. |
difference | Subtracts the colors of the background layers from each other. |
exclusion | Similar to difference, but with lower contrast. |
hue | Applies the hue (color tone) of the blend layer to the base layer. |
saturation | Applies the saturation of the blend layer to the base layer. |
color | Applies the color of the blend layer to the base layer while preserving brightness. |
luminosity | Applies the brightness of the blend layer to the base layer while preserving color. |
📄 Example
In this example, we'll blend two background images using the multiply blend mode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS background-blend-mode Example</title>
<style>
.blended-background {
width: 100%;
height: 300px;
background-image: url('image1.jpg'), url('image2.png');
background-blend-mode: multiply;
background-size: cover;
}
</style>
</head>
<body>
<h1>Background Blend Mode Example</h1>
<div class="blended-background"></div>
</body>
</html>
🖥️ Browser Compatibility
The background-blend-mode
property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is important to test your website in different browsers to ensure that the blend modes render as expected.
🎉 Conclusion
The background-blend-mode
property offers a powerful way to create visually striking effects by blending multiple background images together. Whether you're looking to enhance a design with subtle texture or create a dynamic, layered background, this property provides the flexibility to achieve your desired effect. Experiment with different blend modes to see how they can transform your web designs.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS background-blend-mode Property), please comment here. I will help you immediately.