CSS Background-Blend-Mode Enhance Web Design

Introduction

The background-blend-mode CSS property is a handy tool for web design. It defines how an element’s background images blend with each other and with the background color. This can create cool visual effects like darkening, lightening, or adding color overlays, making your website look awesome.

Blending modes are specified in the same order as the background-image property. If the number of blending modes and background images don’t match, the blending modes will be repeated or truncated. This gives you flexibility to experiment with different combinations.

Let’s dive into the background-blend-mode property, including its syntax, values, examples, and browser compatibility. We’ll also answer some common questions to help you use this property effectively in your web projects.

Specification

The background-blend-mode property is defined in the Compositing and Blending Level 2 specification. This specification explains how background images and colors blend together, providing a standardized way to control the blending of multiple background layers.

Syntax

The background-blend-mode property allows you to specify how background images and colors blend together. Here’s a basic example:

/* One value */
background-blend-mode: normal;

/* Two values, one per background */
background-blend-mode: darken, luminosity;

/* Global values */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;

Explanation of Syntax

• One value: Applies a single blending mode to all background images and colors.
• Multiple values: Specifies different blending modes for each background image.
• Global values: Controls how the property is applied using standard CSS conventions.

Usage in CSS

Make sure the number of blending modes matches the number of background images. If there’s a mismatch, the blending modes will be repeated or truncated.

Here’s a simple example:

.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen, multiply;
}

In this example, image1.png uses the screen mode, and image2.png uses the multiply mode.

Values

The background-blend-mode property can take various values (<blend-mode>) to create different visual effects. Here are the possible values:

• normal: No special blending effect.
• multiply: Darkens the images.
• screen: Lightens the images.
• overlay: Combines multiply and screen.
• darken: Selects the darker pixel.
• lighten: Selects the lighter pixel.
• color-dodge: Brightens the image.
• saturation: Preserves the saturation of the background image.
• color: Preserves the hue and saturation of the background image.
• luminosity: Preserves the luminosity of the background image.
• difference: Subtracts the darker color from the lighter one.
• exclusion: Similar to difference but less intense.
• hard-light: Intense version of overlay.
• soft-light: Subtle version of overlay.
• hue: Preserves the hue of the background image.

Examples of Usage

Here are some examples to illustrate how these values can be used in CSS:

/* Example with normal blending mode */
.normal-blend {
  background-blend-mode: normal;
}

/* Example with multiply blending mode */
.multiply-blend {
  background-blend-mode: multiply;
}

/* Example with screen blending mode */
.screen-blend {
  background-blend-mode: screen;
}

/* Example with overlay blending mode */
.overlay-blend {
  background-blend-mode: overlay;
}

/* Example with darken blending mode */
.darken-blend {
  background-blend-mode: darken;
}

/* Example with lighten blending mode */
.lighten-blend {
  background-blend-mode: lighten;
}

/* Example with color-dodge blending mode */
.color-dodge-blend {
  background-blend-mode: color-dodge;
}

/* Example with saturation blending mode */
.saturation-blend {
  background-blend-mode: saturation;
}

/* Example with color blending mode */
.color-blend {
  background-blend-mode: color;
}

/* Example with luminosity blending mode */
.luminosity-blend {
  background-blend-mode: luminosity;
}

/* Example with difference blending mode */
.difference-blend {
  background-blend-mode: difference;
}

/* Example with exclusion blending mode */
.exclusion-blend {
  background-blend-mode: exclusion;
}

/* Example with hard-light blending mode */
.hard-light-blend {
  background-blend-mode: hard-light;
}

/* Example with soft-light blending mode */
.soft-light-blend {
  background-blend-mode: soft-light;
}

/* Example with hue blending mode */
.hue-blend {
  background-blend-mode: hue;
}

Formal Definition

The background-blend-mode property is defined with specific initial values, applicability, inheritance, computed values, and animation type. Understanding these aspects helps ensure consistent use across different browsers and devices.

Initial Value

• Initial Value: normal
  • The default blending mode is normal, with no special blending effect.

Applies To

• Applies To: All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. It also applies to ::first-letter and ::first-line pseudo-elements.
  • This property can be used on various elements, making it versatile for different web design scenarios.

Inherited

• Inherited: No
  • The background-blend-mode property is not inherited from parent elements.

Computed Value

• Computed Value: As specified
  • The computed value is the value specified in the CSS.

Animation Type

• Animation Type: Not animatable
  • The background-blend-mode property cannot be animated.

Formal Syntax

background-blend-mode = [<mix-blend-mode>]#

• [<mix-blend-mode>]#: The property can take one or more mix-blend-mode values, separated by commas. Each value corresponds to a background image or color layer.

Example of Formal Syntax

/* One value */
background-blend-mode: normal;

/* Two values, one per background */
background-blend-mode: darken, luminosity;

/* Global values */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;

Practical Application

Understanding the formal definition of the background-blend-mode property is crucial for effective use in web design. By knowing the initial values, applicability, inheritance, computed values, and animation type, developers can ensure consistency with the latest standards and best practices.

This property is great for creating visually appealing and dynamic backgrounds that enhance the overall user experience on a website. By experimenting with different blending modes, developers can achieve unique and engaging visual effects.

Examples

Here are practical examples of how the background-blend-mode property can be used to create cool backgrounds.

Basic Example

This example shows how to use the background-blend-mode property with two background images and the screen blending mode:

.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}

In this example, both image1.png and image2.png will be blended together using the screen blending mode, which tends to produce a lighter effect.

Try Out Different Blend Modes

Here’s an interactive example where you can try out different blending modes using a dropdown menu:

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>

#div {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}

document.getElementById("select").onchange = (event) => {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};

In this example, the background images will change their blending mode based on the selected option from the dropdown menu. This allows you to see the effect of different blending modes in real-time.

Normal Blending Mode

Description: The normal blending mode is the default setting. It shows the background images and colors as they are, with no special effects.

Usage: Use normal when you want to display backgrounds without any blending, like a baseline or fallback option.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Normal Blending Mode</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;

            background-blend-mode: normal;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="myDIV"></div>
</body>
</html>

Multiply Blending Mode

Description: The multiply mode makes the background images and colors darker by multiplying their values.

Usage: Use multiply to create richer, more dramatic backgrounds by adding depth and contrast.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Multiply Blending Mode</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;

            background-blend-mode: multiply;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="myDIV"></div>
</body>
</html>

Screen Blending Mode

Description: The screen mode makes the background brighter by inverting and multiplying colors, then inverting again.

Usage: Use screen to create lighter, more vibrant backgrounds, perfect for highlighting elements.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Screen Blending Mode</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;

            background-blend-mode: screen;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="myDIV"></div>
</body>
</html>

Darken Blending Mode

Description: The darken mode keeps the darker pixels between the background images and colors.

Usage: Use darken to emphasize the darker elements, creating a moody and dramatic effect.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Darken Blending Mode</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;

            background-blend-mode: darken;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="myDIV"></div>
</body>
</html>

Lighten Blending Mode

Description: The lighten mode keeps the lighter pixels between the background images and colors.

Usage: Use lighten to emphasize the lighter elements, creating a bright and vibrant effect.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lighten Blending Mode</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;

            background-blend-mode: lighten;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="myDIV"></div>
</body>
</html>

Color-Dodge Blending Mode

Description: The color-dodge mode brightens the image by dividing the background color by the inverse of the background image.

Usage: Use color-dodge to add brightness and vibrancy to background layers, making them stand out more prominently.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Color-Dodge Blending Mode</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;

            background-blend-mode: color-dodge;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="myDIV"></div>
</body>
</html>

Saturation Blending Mode

Description: The saturation mode preserves the saturation of the background image while mixing the hue and luminosity of the background color.

Usage: Use saturation to maintain the color intensity of the background image while blending it with other colors, creating a unique and visually appealing effect.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Saturation Blending Mode</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;

            background-blend-mode: saturation;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="myDIV"></div>
</body>
</html>

Difference Blending Mode

Description: The difference mode subtracts the darker color from the lighter one, resulting in high contrast and making the background stand out.

Usage: Use difference to create unique and dramatic effects by emphasizing differences between background layers. It’s great for artistic designs that need contrast and depth.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Difference Blending Mode</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;

            background-blend-mode: difference;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="myDIV"></div>
</body>
</html>

Luminosity Blending Mode

Description: The luminosity mode preserves the luminosity of the background image while mixing the hue and saturation of the background color.

Usage: Use luminosity to maintain the brightness of the background image while blending it with other colors, creating a sense of depth and richness.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Luminosity Blending Mode</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;

            background-blend-mode: luminosity;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="myDIV"></div>
</body>
</html>

Overlay Blending Mode

Description: The overlay mode combines the multiply and screen modes. If the background color is lighter than 50% gray, it applies the screen effect; if it’s darker, it applies the multiply effect.

Usage: Use overlay to enhance contrast and depth by blending the background images and colors, creating a visually striking and impactful effect.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Overlay Blending Mode</title>
    <style>
        #myDIV {
            width: 400px;
            height: 299px;
            background-color: green;
            background-repeat: no-repeat;

            background-blend-mode: overlay;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="myDIV"></div>
</body>
</html>

Exclusion Blending Mode

Description: The exclusion mode subtracts the darker color from the lighter one, but with a softer effect compared to the difference mode. This creates a unique and dramatic look by highlighting the differences between the background layers, making them stand out more prominently but gently.

Usage: This mode is great for creating unique and dramatic effects with a softer touch. It