Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Effects

Blending & Backdrop

Written by Published

Blend overlapping content, isolate compositing groups, and filter the pixels behind translucent surfaces. It explains element blending, backdrop blending, isolation, translucent glass surfaces, unprefixed support, contrast, and rendering cost.

Blend modes combine an element’s pixels with its backdrop. Backdrop filters process the pixels behind a translucent element before that element is composited.

The final result depends on surrounding content, not only on the component’s own colors. That makes these effects expressive but less predictable than an opaque surface. Isolation can establish a controlled compositing group, while a sufficiently opaque fallback protects readability when filters are unavailable or disabled. This topic also connects with CSS Filters and CSS Opacity.

Blend content with its backdrop

Example

css

.poster__title {
  mix-blend-mode: screen;
}

.poster {
  isolation: isolate;
}

mix-blend-mode controls how an element’s pixels combine with the backdrop. isolation: isolate starts a new stacking context and prevents blending with content outside the component.

Filter what is behind an element

Example

css

.glass-panel {
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid rgb(255 255 255 / 0.55);
}

Backdrop filters need transparency to be visible and can be expensive over large or frequently moving regions. Provide an opaque-enough background so text remains readable if the filter is unavailable.

Compositing Properties

PropertyPurposeExample
mix-blend-modeBlends an element with the content behind it.mix-blend-mode: multiply
background-blend-modeBlends an element's background layers.background-blend-mode: screen
backdrop-filterFilters pixels behind a translucent element.backdrop-filter: blur(12px)
isolationCreates a separate stacking context for blending.isolation: isolate

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blending & Backdrop example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

.poster__title {
  mix-blend-mode: screen;
}

.poster {
  isolation: isolate;
}

.glass-panel {
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid rgb(255 255 255 / 0.55);
}
  </style>
</head>
<body>
  <main class="poster" style="padding:3rem;background:linear-gradient(135deg,#0f172a,#7c3aed)"><h1 class="poster__title">Blend mode</h1><section class="glass-panel"><p>Backdrop-filter blurs the pixels behind this panel.</p></section></main>
</body>
</html>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
mix-blend-mode4179328
backdrop-filter, unprefixed767910318

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

  • Blend modes are sensitive to every color behind them. Use them for controlled artwork, not for text whose contrast must remain predictable.
  • Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
  • Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Use compositing effects inside controlled surfaces where contrast and rendering cost remain predictable.

Use blending for artwork and bounded decorative regions, not for text whose contrast must remain constant. Keep filtered areas small, avoid animating large blurred surfaces, and measure repaint cost on the devices the interface actually targets.

PreviousClipping & MaskingNextScroll Snap