The Art of Blending: CSS Mix-Blend-Mode
An exploration of how to blend HTML elements together, creating visually rich effects directly in the browser, much like a digital artist's canvas.
What is Mix-Blend-Mode?
The mix-blend-mode CSS property defines how an element's content should blend with the content of the element's parent and its background. Think of it like layers in a graphics editor such as Photoshop or Figma. You have a bottom layer (the backdropThe content that is behind the element. This includes the parent element's background and any other elements lower in the stacking order.) and a top layer (the sourceThe element to which you apply the `mix-blend-mode` property.). The blend mode is the mathematical formula that dictates how the pixels of these two layers combine to create the final visual result.
A Simple Analogy
Imagine two colored spotlights. The backdrop is a blue light shining on a wall. The source is a pink light you shine on the same spot. The mix-blend-mode determines how these lights mix. Do they add up to become brighter (like screen)? Or do they create a new color in the overlapping area (like multiply)?
The Importance of Stacking Context
For mix-blend-mode to work predictably, it needs to operate within a defined "blending area." This is controlled by the CSS stacking contextA conceptual three-dimensional arrangement of HTML elements along an imaginary z-axis. Certain CSS properties create a new stacking context, which can affect rendering, including how blend modes are applied.. If an element with a blend mode is part of a complex layout, it might blend with things you don't intend.
The property isolation: isolate; is your best friend here. Applying it to the parent of the blending element creates a new stacking context. This "isolates" the blending effect, forcing the source element to only blend with the backdrop *within that parent*, preventing it from blending with elements further behind it.
Without isolation: isolate
The blue circle blends with its gray parent AND the gradient background.
With isolation: isolate
The blending is contained. The circle only blends with its gray parent.
Blend Mode Explorer
Hover over or tap on the cards below to see a description of each blend mode. The text inside each card has the corresponding mix-blend-mode applied.
Interactive Playground
Controls
Blend Me!
Practical Use Cases
This popular effect makes text appear as if it's "cut out" of an image, revealing the background behind it. It's achieved by placing text over an image and using mix-blend-mode: screen on a container with a black background, or mix-blend-mode: multiply on white text over a container with a white background.
OCEAN
<div class="image-bg">
<div class="blender">
<h2>OCEAN</h2>
</div>
</div>.image-bg {
background-image: url(...);
isolation: isolate; /* Important! */
}
.blender {
background-color: black;
mix-blend-mode: multiply;
}
.blender h2 {
color: white;
}Quickly create duotone or tinted image effects by overlaying a colored div on an image. Modes like multiply, screen, overlay, and color work great for this. It's a lightweight alternative to using image filters.
