CSS mix-blend-mode Property

Description

The mix-blend-mode property controls how an element’s painted content is blended with the backdrop — the pixels that are already present behind that element — by choosing a compositing operation that determines how source (the element) and destination (the backdrop) colors and alpha are combined. Conceptually it works like the blending modes in image editors: rather than simply drawing the element on top of whatever is behind it, the browser computes a pixel-by-pixel combination according to the chosen blending formula, producing richer visual effects such as tinting, soft light, or contrast changes without modifying the backdrop or source images themselves. Blending is performed during the compositing/painting stage after layout, and it operates on rendered pixel data rather than on raw DOM or semantic structure.

How much of the rest of the page an element blends with depends on painting order and stacking contexts. By default an element can blend with everything behind it up the document root, but that region can be confined by creating a new stacking context — for example using isolation on a parent will isolate its children so their blend is confined to that parent’s backdrop. Practical consequences of stacking, transforms, and stacking contexts mean that the same mix-blend-mode value can look very different depending on where the element sits in the DOM and whether ancestor elements establish new compositing layers.

Blending also interacts with other compositing-related properties and effects. The final blended result is affected by transparency and alpha composition, so element-level effects such as opacity will influence the visible outcome; likewise, blending is conceptually different from background-blend-mode, which blends background layers within a single element rather than blending the element with its backdrop. Filters, masks, and CSS transforms can cause the user agent to create intermediate layers; those layers are what actually get blended with the backdrop.

Typical uses include creative visual treatments (color grading, subtle texture preservation under overlays), making text or icons visually integrate with complex photographic backgrounds, and producing UI effects without rasterizing or altering source images. Performance-wise, blending can be more expensive than simple painting because it often forces the browser to allocate intermediate render targets and read back pixels for compositing; using layer hints like will-change sparingly can sometimes help, but the best practice is to test and measure on target devices. Finally, because blending operates on pixel data and can change perceived contrast and color, verify accessibility (contrast and legibility) when using blend effects in critical UI elements.

Definition

Initial value: normal
Applies to: All elements
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.mixBlendMode

Interactive Demo

Syntax

mix-blend-mode = normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue |
saturation | color | luminosity

Values

normalThis is the default attribute which specifies no blending. The blending formula simply selects the source color.
multiplyThe source color is multiplied by the destination color and replaces the destination. The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color.
screenMultiplies the complements of the backdrop and source color values, then complements the result. The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged. The effect is similar to projecting multiple photographic slides simultaneously onto a single screen.
overlayMultiplies or screens the colors, depending on the backdrop color value. Source colors overlay the backdrop while preserving its highlights and shadows. The backdrop color is not replaced but is mixed with the source color to reflect the lightness or darkness of the backdrop.
darkenSelects the darker of the backdrop and source colors. The backdrop is replaced with the source where the source is darker; otherwise, it is left unchanged.
lightenSelects the lighter of the backdrop and source colors. The backdrop is replaced with the source where the source is lighter; otherwise, it is left unchanged.
color-dodgeBrightens the backdrop color to reflect the source color. Painting with black produces no changes.
color-burnDarkens the backdrop color to reflect the source color. Painting with white produces no change.
hard-lightMultiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop.
soft-lightDarkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop.
differenceSubtracts the darker of the two constituent colors from the lighter color. Painting with white inverts the backdrop color; painting with black produces no change.
exclusionProduces an effect similar to that of the Difference mode but lower in contrast. Painting with white inverts the backdrop color; painting with black produces no change
hueCreates a color with the hue of the source color and the saturation and luminosity of the backdrop color.
saturationCreates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change.
colorCreates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images.
luminosityCreates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode.

Example

HTML

<div class="demo">

    <div class="background"></div>



    <div class="layer">

        <div class="circle circle--left">Multiply</div>

        <div class="circle circle--right">Screen</div>



        <div class="title">mix-blend-mode examples</div>

        <div class="text">Difference text</div>

    </div>

</div>

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 32px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.demo {
    position: relative;
    width: 720px;
    height: 360px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.background {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #ffefa3 0%, #ffc0cb 25%, #a0e7ff 50%, #c6ffdd 75%);
    background-size: 400% 400%;
    animation: move 12s linear infinite;
}

@keyframes move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.layer {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

.circle {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    transition: transform 220ms ease;
}

.circle--left {
    background: rgba(255, 50, 50, 0.85);
    mix-blend-mode: multiply;
}

.circle--right {
    background: rgba(50, 150, 255, 0.85);
    mix-blend-mode: screen;
    margin-left: -60px; /* overlap the circles */
}

.circle:hover {
    transform: scale(1.04);
}

.title {
    position: absolute;
    top: 16px;
    left: 16px;
    font-weight: 700;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.35);
    padding: 8px 12px;
    border-radius: 8px;
}

.text {
    position: absolute;
    bottom: 16px;
    right: 16px;
    font-weight: 700;
    font-size: 18px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    color: #000;
    mix-blend-mode: difference;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS mix-blend-mode property. Hover over a browser icon to see the version that first introduced support for this CSS property.