CSS Blend Modes: mix-blend-mode and background-blend-mode explained with examples

The mix-blend-mode property in CSS allows you to visually blend an element with what is beneath it, in a way very similar to the blend modes that exist 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 first started experimenting with this property, what caught my attention the most was not just the visual result, but how small changes in the background —for example, progressively transitioning 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 is very easy to combine the color of certain elements to achieve effects that would otherwise require photo retouching tools like GIMP or Photoshop. The mix-blend-mode property specifies how an element should blend with the element beneath it.

Previously we saw how to create rounded corners with CSS.

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

mix-blend-mode defines how an element's colors combine with the colors of the background or the elements below it in the stacking context. It does not modify the element in isolation, but rather the result of its overlap with the lower layers.

This makes it especially useful for:

• Blending text with background images.
• Creating duotone effects without editing images.
• Highlighting interactive elements in a subtle way.
• Simulating light, shadow, or contrast effects directly in CSS.
• Replacing static retouched images with dynamic effects in code.

Unlike other visual properties, here the result depends as much on the element as on the background. In my tests, when animating the background color from black to white, some modes even made the image practically disappear: something that is not well understood until you see it in motion.

How blend modes work in CSS

Blend modes take the color values of two layers and apply a mathematical algorithm to calculate the resulting color:

• 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 chosen mode's algorithm. Depending on the value, the result can be an additive, subtractive, comparative fusion, or one based on the HSL color space.

mix-blend-mode vs background-blend-mode

It is important not to confuse these two properties, as they act in different contexts:

• mix-blend-mode: blends a complete element (text, image, div, etc.) with whatever is behind it in the document flow.
• background-blend-mode: blends the different backgrounds of a single element among themselves (for example, when combining multiple background-image values or gradients).

If you have multiple background-image values or gradients in the same container, you will use background-blend-mode. If you want a text, an image, or a div to merge 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), which means the calculation is applied independently on the red, green, and blue values. 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, as the background was progressively darkened, modes like multiply, overlay, or darken made the image lose visibility almost completely, whereas when lightening the background, it was the turn of screen or color-dodge to saturate until disappearing.

Non-separable blend modes

These modes work in the HSL color space (hue, saturation, and luminosity) and do not separate the RGB channels individually. Instead, they operate on perceptual color properties:

• hue
• saturation
• color
• luminosity

They are especially useful when you want to preserve certain background properties —for example, luminosity— and apply only the hue or saturation of the top element. This makes them very precise tools for recoloring images or creating dynamic color palettes without losing visual structure.

Why some elements "disappear" depending on the background

This is one of the behaviors that causes the most confusion among those starting to use mix-blend-mode. It is not a bug: it is the mode working correctly.

When the background approaches absolute white or black, some algorithms produce results very close to the background itself, causing the element to practically merge with it and cease to be perceptible. In animations where the background smoothly transitions from light to dark, you can clearly appreciate how certain values stop being visible during part of the transition. Understanding this is essential to use these modes judiciously and avoid readability issues.

mix-blend-mode values explained one by one

multiply, screen, and overlay

• multiply darkens the result by multiplying the color values of both layers. Whites become transparent and blacks remain black. It is the CSS equivalent of Photoshop's "Multiply" mode.
• screen is the inverse of multiply: it lightens the image. Blacks disappear and whites remain white.
• overlay combines both according to the background luminosity: if the background is light, it acts as screen; if it is dark, it acts as multiply.

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

darken, lighten, and extreme contrasts

• darken preserves the darkest color of each channel between both layers.
• lighten preserves the lightest of each channel.

They are useful for direct comparisons between layers, although they can generate unexpected colors depending on the color combination. They do not perform a smooth blend, but rather a direct selection of the extreme value.

difference and exclusion

These modes generate inversion effects based on the mathematical difference between the colors of the layers:

• difference inverts colors according to the difference between layers. Over a black background it produces no effect; over a white background, it completely inverts the element's colors.
• exclusion does something similar, but with less contrast and a softer, desaturated result.

Visually, both resemble a photographic negative. mix-blend-mode: difference is a favorite for psychedelic or dynamic inversion effects, especially when animated over variable backgrounds.

hue, saturation, color, and luminosity

These modes allow you to blend specific color properties in a very controlled way:

• hue: takes the hue from the top element and combines it with the saturation and luminosity of the background.
• saturation: takes the saturation from the top element and applies it over the hue and luminosity of the background.
• color: takes both the hue and saturation from the top element, preserving only the luminosity of the background.
• luminosity: takes the luminosity from the top element and applies it over the hue and saturation of the background.

They are ideal for controlled color effects without losing the structural detail of the underlying image. For example, color is very useful for colorizing grayscale photographs directly with CSS.

Practical examples of mix-blend-mode

In this section we will look at a series of examples where the background color will be progressively changed from black to white via CSS animations, with the goal of easily visualizing the changes that exist between the different allowable values of the mix-blend-mode property.

Blending text with background images

One of the most common uses of CSS blend modes is applying mix-blend-mode to text so that it integrates with a background image without losing readability. The overlay mode usually yields very good results in this case, as it adapts contrast according to the luminosity of the underlying area.

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

This approach avoids having to manually retouch the image and makes the text react dynamically to any change in the background.

Visual effects by animating background color

Animating the background from white to black via @keyframes is one of the best ways to understand how each blend mode works. The transition makes it very clear which values depend on background luminosity and which operate more independently.

These types of animations are especially useful in demos or educational articles, but can also be applied to hover effects or section transitions in real projects.

Effects on images

With the mix-blend-mode property you can obtain very interesting effects to blend colors with images, such as dynamic duotones or conditional colorization depending on the visual context:

Each property value has a unique behavior that differentiates it from the others. In the following example you can see the compared effect across several modes applied to SVG elements:

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

For example, when switching to dark colors, images with multiply, color-burn, overlay, darken, and soft-light values, among others, tend to "disappear" or stop being visible.

The opposite case happens when approaching lighter colors: values like color-dodge, lighten, and soft-light also tend to saturate until becoming imperceptible.

Common problems and best practices

Stacking contexts and the isolation property

One of the most frequent problems when using mix-blend-mode is that the element blends with layers we do not want involved. To control this, the isolation property exists.

isolation: isolate creates a new stacking context and prevents an element with mix-blend-mode from interacting with elements outside the parent container. It is the way to "delimit" the blending area.

.container {
    isolation: isolate;
}

Applying isolation: isolate to the parent container is one of the best practices when using mix-blend-mode in reusable components, as it prevents unexpected behaviors in complex layouts.

Cases where mix-blend-mode provides real value

• Dynamic duotones generated in CSS without image editing.
• :hover states on buttons with inversion or luminosity effects.
• Highlighted visual sections with color overlay.
• Hero sections with complex images and integrated texts.
• Color masks over playing videos or images.

When NOT to use mix-blend-mode

• When contrast is critical for accessibility (it can compromise WCAG ratios).
• In very complex interfaces where layer overlapping is hard to predict.
• If the visual result depends too much on a dynamic or variable background that you do not control.
• When you need guaranteed compatibility with very old browsers or print environments.

Browser compatibility

mix-blend-mode is supported in all modern browsers with excellent coverage. You can use it with confidence in:

• Chrome
• Firefox
• Edge
• Safari

It is always advisable to perform cross-browser testing to ensure the effect does not compromise readability or design in extreme cases.

Differences between mix-blend-mode and CSS filters (filter)

Although both properties produce visual effects, their operation is fundamentally different:

• Blend modes like mix-blend-mode blend colors between layers: the result always depends on what is underneath.
• CSS filters (filter) modify an element in isolation, regardless of context: blur, grayscale, saturate, contrast, brightness, etc.
• Both can be combined on the same element to enhance the effect, but they serve different functions and are not interchangeable.

For example, filter: grayscale(1) turns an element grayscale regardless of its background, whereas mix-blend-mode: luminosity takes the element's luminosity and blends it with the background color, producing a completely different result.

Conclusion

mix-blend-mode is a powerful property that, once well understood, opens up many creative possibilities directly in CSS. The key lies not just in memorizing values, but in testing them with different backgrounds, animating them, and observing their real behavior in context.

If used judiciously —taking accessibility and stacking context into account—, it can replace many externally edited images and provide advanced visual effects without adding extra weight to the project.

Learn to use 3D aspects through the perspective property in CSS and 3D distance.