CSS Effects
Blending & Backdrop
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
| Property | Purpose | Example |
|---|---|---|
| mix-blend-mode | Blends an element with the content behind it. | mix-blend-mode: multiply |
| background-blend-mode | Blends an element's background layers. | background-blend-mode: screen |
| backdrop-filter | Filters pixels behind a translucent element. | backdrop-filter: blur(12px) |
| isolation | Creates 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-mode | 41 | 79 | 32 | 8 |
| backdrop-filter, unprefixed | 76 | 79 | 103 | 18 |
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.