A Detailed Explanation of Blend Modes (mix-blend-mode) in CSS

I. Topic Description
Blend mode is a technique for computationally blending the colors of multiple layers. In CSS, it is primarily implemented via the mix-blend-mode property. It defines how an element's content blends its color with the background (including parent and sibling elements). It is commonly used for creating visual effects, image processing, and creative design. Similar to layer blend modes in Photoshop, this property allows developers to achieve complex color interaction effects directly in the browser.

II. Property Values and Classification
Blend modes are divided into six major categories with a total of 16 modes:

1. Normal Class: normal (default, no blending)
2. Darkening Class: multiply, darken, color-burn
3. Lightening Class: screen, lighten, color-dodge
4. Contrast Class: overlay, hard-light, soft-light
5. Comparative Class: difference, exclusion
6. Color Component Class: hue, saturation, color, luminosity

III. Working Principles Explained in Detail
Blend mode calculations are based on pixel color values. Common modes are explained below as examples:

1. multiply

   • Calculation Formula: Result Color = (Top Color × Bottom Color) / 255
   • Effect Description: Similar to ink overlay, always results in a darker color. White blend has no effect; black blend always results in black.
   • Example:

     .blend-element {
       mix-blend-mode: multiply;
       background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
     }
     

2. screen

   • Calculation Formula: Result Color = 255 - [(255 - Top Color) × (255 - Bottom Color)] / 255
   • Effect Description: Similar to projector overlay, always results in a lighter color. Black blend has no effect; white blend always results in white.

3. overlay

   • Calculation Logic: Decides whether to perform multiply or screen based on the luminance of the bottom color.
   • Enhances contrast in dark areas and brightens light areas of the bottom layer, preserving highlight and shadow details.

IV. Practical Implementation Steps
Understand the process through specific cases:

Case 1: Text and Image Blending Effect

<div class="container">
  <img src="background.jpg" alt="Background">
  <h1 class="blend-text">Blended Text</h1>
</div>

.container {
  position: relative;
  background-color: #ff6b6b; /* Fallback background color */
}

.blend-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #4ecdc4;
  mix-blend-mode: difference; /* Difference mode produces an inverted color effect */
  font-size: 4rem;
}

Achieved Effect: The text color automatically inverts based on the background image colors, ensuring it remains visible.

Case 2: Image Color Adjustment

.photo-filter {
  background-image: url(photo.jpg);
  position: relative;
}

.photo-filter::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(45deg, #ff0000, #0000ff);
  mix-blend-mode: color; /* Preserves the original image's luminosity and applies the gradient colors */
}

V. Notes and Techniques

1. Isolating Blending: Use isolation: isolate to create a new stacking context, limiting the blending scope.

   .parent {
     isolation: isolate; /* Prevents blending with elements further down the stack */
   }
   

2. Performance Consideration: Blend modes can trigger repaints; use cautiously in animations.

3. Compatibility Handling:

   @supports not (mix-blend-mode: overlay) {
     .fallback {
       /* Provide a fallback solution */
       opacity: 0.8;
     }
   }
   

4. Difference from Background Blend Mode:

   • mix-blend-mode: Blends the element with its background.
   • background-blend-mode: Blends multiple backgrounds of a single element.

VI. Practical Application Scenarios

1. Dynamic text contrast assurance (readable on any background).
2. Image color filter effects.
3. Creative poster design.
4. Highlighting data visualization charts.

By understanding the mathematical calculation principles behind different blend modes, you can more precisely control the presentation of visual effects, creating rich visual layers and interactive experiences.