Skip to content
LibraryCSS
Türkçe
mix-blend-modeAdvancedUsed in 103 effects

Compositing layers with CSS blend modes

Blend modes calculate an element's final color from its own pixels and the backdrop below them. mix-blend-mode blends an element with content behind it; background-blend-mode combines multiple background layers inside one element.

The result depends on the actual backdrop, so the same declaration can look completely different in another container. Controlled blending therefore begins by defining a local compositing boundary.

Choose mix or background blending

Use background-blend-mode when gradients and images belong to a single surface. Use mix-blend-mode when a child layer, heading, or decorative object should interact with pixels beneath it.

Common modes include multiply for ink-like darkening, screen for lightening, overlay for stronger contrast, and difference for inversion-like effects. Test with the real colors rather than selecting a mode by name alone.

multiply
Darkens by multiplying channels; useful for texture and ink effects.
screen
Lightens by inverting, multiplying, and inverting again.
difference
Uses channel differences; dramatic but sensitive to backdrop changes.
cssA contained duotone treatment
.artwork {
  isolation: isolate;
  background:
    linear-gradient(135deg, #2563eb, #ec4899),
    url("portrait.jpg") center / cover;
  background-blend-mode: color;
}

.artwork__glow {
  mix-blend-mode: screen;
  background: radial-gradient(circle, #fff8, transparent 65%);
}

Contain blending with isolation

Without a new stacking context, a blending child may interact with backgrounds outside its component. isolation: isolate tells the browser to composite the component as a group and prevents that visual leak.

Apply isolation at the component boundary, not indiscriminately across every child. A clear boundary also makes screenshots and theme changes more predictable.

Animate geometry, not the blend calculation

Moving a blended element changes which backdrop pixels it samples and may force large areas to repaint. Prefer small contained layers, and animate their transform or opacity rather than switching blend modes continuously.

Fixed blended decorations can be especially costly because the entire scrolling backdrop changes beneath them. Measure before using that pattern on long pages.

Keep meaning independent of compositing

Blend results vary across themes, photographs, and browser color pipelines. Do not use them as the only way to show status or preserve text contrast. Provide a stable base color and treat blending as enhancement.

If text itself is blended, test the lightest and darkest supported backdrops. Ordinary text should usually remain outside the effect layer.

Live catalog examples

These production examples use mix-blend-mode. Open any effect to inspect its complete source and experiment in the browser editor.

View all 103 effects using mix-blend-mode

Browser support

Support notes refer to stable, unprefixed behavior unless a prefix is explicitly listed.

FeatureBrowsersNote
mix-blend-modeAll modern browsersResults depend on stacking contexts and backdrop pixels.
background-blend-modeAll modern browsersOne mode can be supplied per background layer.
isolationAll modern browsersUse `isolate` to create a predictable component boundary.

Common pitfalls

  • The effect leaks into the page

    Add isolation: isolate to the intended component boundary.

  • The design assumes a white backdrop

    Provide a known local background instead of relying on the page behind the component.

  • A large blended layer is animated

    Contain the layer and animate inexpensive geometry; profile scrolling and repainting.

  • Text contrast is left to the blend mode

    Keep essential text on a stable, contrast-tested surface.

Frequently asked questions

What is the difference between the two blend properties?
mix-blend-mode blends an element with its backdrop; background-blend-mode combines backgrounds within one element.
Why does blending change outside the component?
The component lacks a compositing boundary. Add `isolation: isolate`.
Which mode creates a duotone?
A color or luminosity blend combined with a controlled gradient is a common starting point, but the source image matters.
Are blend modes expensive?
They can increase compositing and repaint work. Cost grows with area, motion, and backdrop changes.

Related guides

Last updated:

All guides