YouTip

## CSS `mix-blend-mode` Property The `mix-blend-mode` CSS property defines how an element's content should blend with the content of its direct parent container and the container's background. This allows developers to create rich, Photoshop-like blending effects directly in the browser using standard HTML and CSS. --- ### Interactive Example In this example, we blend an image element with its parent container's yellow background. Applying the `darken` blend mode causes the image to merge with the background, resulting in a darker, stylized appearance. ```css .container { background-color: yellow; padding: 15px; } .container img { mix-blend-mode: darken; } ``` --- ### Property Specifications | Feature | Specification | | :--- | :--- | | **Default Value** | `normal` | | **Inherited** | No | | **Animatable** | No | | **JavaScript Syntax** | `object.style.mixBlendMode = "darken"` | --- ### Browser Support The numbers in the table specify the first browser version that fully supports the `mix-blend-mode` property. | Property | Chrome | Edge | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **`mix-blend-mode`** | 41.0 | 79.0 | 32.0 | 8.0 | 35.0 | --- ### Syntax ```css mix-blend-mode: ; ``` #### Available Blend Modes The `` value can be any of the following: ```css mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity; ``` --- ### Detailed Blend Mode Descriptions * **`normal`**: The default mode. No blending is applied; the element renders normally on top of its parent. * **`multiply`**: Multiplies the colors of the element and the background. The result is always a darker color. Black remains black, and white becomes transparent. * **`screen`**: Multiplies the inverse of the colors. The result is always a lighter color. White remains white, and black becomes transparent. * **`overlay`**: Combines `multiply` and `screen` modes. It preserves highlights and shadows while mixing the colors. * **`darken`**: Compares the color values of the element and the background, keeping the darker pixels. * **`lighten`**: Compares the color values of the element and the background, keeping the lighter pixels. * **`color-dodge`**: Brightens the background color to reflect the element's color. * **`color-burn`**: Darkens the background color to reflect the element's color. * **`hard-light`**: Multiplies or screens the colors, depending on the source color value. It behaves like a harsh spotlight. * **`soft-light`**: Darkens or lightens the colors, depending on the source color value. It behaves like a diffused, soft spotlight. * **`difference`**: Subtracts the darker color from the lighter color. Blending with white inverts the background color; blending with black produces no change. * **`exclusion`**: Similar to `difference` but with lower contrast. * **`hue`**: Combines the hue of the element with the saturation and luminosity of the background. * **`saturation`**: Combines the saturation of the element with the hue and luminosity of the background. * **`color`**: Combines the hue and saturation of the element with the luminosity of the background. * **`luminosity`**: Combines the luminosity of the element with the hue and saturation of the background. --- ### Comprehensive CSS Example Below is a demonstration of how to apply different blend modes to elements in your stylesheet: ```css /* Reset and base styles */ .normal { mix-blend-mode: normal; } .multiply { mix-blend-mode: multiply; } .screen { mix-blend-mode: screen; } .overlay { mix-blend-mode: overlay; } .darken { mix-blend-mode: darken; } .lighten { mix-blend-mode: lighten; } .color-dodge { mix-blend-mode: color-dodge; } .color-burn { mix-blend-mode: color-burn; } .difference { mix-blend-mode: difference; } .exclusion { mix-blend-mode: exclusion; } .hue { mix-blend-mode: hue; } .saturation { mix-blend-mode: saturation; } .color { mix-blend-mode: color; } .luminosity { mix-blend-mode: luminosity; } ``` --- ### Important Considerations 1. **Stacking Contexts**: `mix-blend-mode` blends an element with its direct parent and background. If you want to isolate a group of elements so they do not blend with elements further down the DOM tree, you can create a new stacking context on a parent element using properties like `isolation: isolate` or `opacity`. 2. **Performance**: Complex blend modes (such as `difference` or `exclusion`) require the browser to perform pixel-by-pixel calculations. Use them mindfully on large pages or scroll-heavy layouts to avoid performance degradation. 3. **Contrast and Accessibility**: When blending text elements over images or colorful backgrounds, ensure that the resulting contrast ratio meets WCAG accessibility guidelines so the text remains readable.