The mix-blend-mode property in CSS: Blending Overlapping Colors

The mix-blend-mode property in CSS allows you to visually blend an element with what is underneath it, in a way very similar to the blending modes found in tools like Photoshop or GIMP. Thanks to it, we can achieve color, contrast, and composition effects that, a few years ago, were only possible with pre-edited images.

When I started experimenting with this property, what struck me the most was not just the visual result, but how small changes in the background—for example, progressively going from white to black—completely altered the behavior of each mode. That is the key to truly understanding it: seeing it in action.

With CSS, it's very easy to combine the color of certain elements to achieve effects that would otherwise require using photo retouching tools like GIMP. The mix-blend-mode property specifies how an element should blend with the element that is underneath it.

What is mix-blend-mode and what is it used for?

mix-blend-mode defines how the colors of an element are combined with the colors of the background or the elements below it in the stacking context. It does not modify the element in isolation, but the result of its superposition.

• This makes it especially useful for:
• Blending text with background images.
• Creating duotone effects without editing images.
• Subtly highlighting interactive elements.
• Simulating light, shadow, or contrast effects.

Unlike other visual properties, here the result depends on both the element and the background. In my tests, by animating the background color from black to white, some modes caused the image to practically disappear, something that is not well understood until you see it.

How CSS Blend Modes Work

Blend modes take color values from two layers:

• Top Layer: The element to which mix-blend-mode is applied.
• Bottom Layer: The background or the elements underneath.

The browser calculates the final color pixel by pixel according to the algorithm of the chosen mode.

mix-blend-mode vs background-blend-mode

It is important not to confuse these two properties:

• mix-blend-mode blends an entire element with what is behind it.
• background-blend-mode blends the different backgrounds of the same element with each other.

If you have multiple background-image or gradients on the same container, you will use background-blend-mode. If you want a text, image, or div to blend with the page background, you need mix-blend-mode.

How Color Blending Works in CSS

Separable Blend Modes

Separable modes work channel by channel (RGB). Among the most used are:

• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion

These are the ones that most clearly show changes when the background luminosity varies. In one of my examples, by progressively darkening the background, modes like multiply, overlay, or darken caused the image to lose visibility almost completely.

Non-Separable Blend Modes

These modes work in the HSL space and do not separate the RGB channels:

• hue
• saturation
• color
• luminosity

They are especially useful when you want to preserve certain properties of the background (for example, luminosity) and apply only the hue or saturation of the top element.

Why some elements “disappear” depending on the background

This is one of the behaviors that generates the most confusion. It's not a bug: it's the mode working correctly.

When the background approaches absolute white or black, some algorithms produce results very close to the background itself. In animations where the background smoothly transitions from light to dark, you can clearly see how certain values become invisible during part of the transition.

mix-blend-mode Values Explained One by One

multiply, screen, and overlay

• multiply darkens the result. Whites become transparent and blacks remain black.
• screen is the inverse: it lightens the image.
• overlay combines both based on the background luminosity.

.elemento { mix-blend-mode: multiply;}

darken, lighten, and extreme contrasts

• darken preserves the darker color.
• lighten preserves the lighter color.

They are useful for direct comparisons between layers, although they can generate unexpected colors.

difference and exclusion

These modes generate inversion effects:

• difference inverts colors based on the difference between layers.
• exclusion does something similar, but with less contrast.

Visually, they resemble a photographic negative.

hue, saturation, color, and luminosity

These modes allow mixing specific properties:

• hue takes the hue of the top element.
• saturation takes the saturation.
• color takes hue and saturation.
• luminosity takes the luminosity.

They are ideal for controlled color effects without losing detail.

Practical mix-blend-mode Examples

In this section, we will see a series of examples where the background color will be progressively changed from black to white through animations, with the objective of easily visualizing the changes that exist between the different acceptable values of the mix-blend-mode property.

Blending text with background images

One of the most common uses is to apply mix-blend-mode to text so that it integrates with a background image without losing legibility.

.title { mix-blend-mode: overlay;}

This approach avoids having to manually retouch the image.

Visual effects by animating the background color

Animating the background from white to black is one of the best ways to understand how each mode works. The transition makes it very clear which values depend on luminosity and which do not.

This type of animation is especially useful in demos or educational articles.

Effects on Images

With the mix-blend-mode property, you can get interesting effects for blending colors with images:

The property has several values which have a behavior that makes them unique compared to the other values:

It can be noted that by varying the background luminosity (going from white to black) some images tend to disappear depending on the value set in the mix-blend-mode property.

For example, when transitioning to dark colors, images with the multiply, color-burn, overlay, darken, soft-light, among other values, tend to "disappear" or become no longer visible.

Another similar case is when transitioning to lighter colors: color-dodge, overlay, lighten, soft-light also tend to disappear.

Common Problems and Best Practices

Stacking Contexts and the isolation Property

The property isolation: isolate creates a new stacking context and prevents an element from blending with external layers.

.container {isolation: isolate;}

Cases where mix-blend-mode provides real value

• Dynamic duotones.
• Hover states on buttons.
• Highlighted visual sections.
• Hero sections with complex images.

When NOT to use mix-blend-mode

• When contrast is critical (accessibility).
• In very complex interfaces.
• If the result depends too much on the dynamic background.

Cross-browser compatibility

mix-blend-mode is supported in modern browsers, but it is always advisable to test:

• Chrome
• Firefox
• Edge
• Safari

It is useful to perform cross-browser testing to ensure that the effect does not break legibility.

Differences between mix-blend-mode and CSS Filters

• Blend Modes mix colors between layers.
• CSS Filters (filter) modify an element in isolation (blur, grayscale, saturate, etc.).
• Both can be combined, but they serve different functions.

Conclusion

mix-blend-mode is a powerful property that, when well understood, opens up many creative possibilities in CSS. The key is not just to memorize the values, but to test them with different backgrounds, animate them, and observe their real behavior.

If used judiciously, it can replace many edited images and provide advanced visual effects directly from the code.