Exclusion blend mode
Use mix-blend-mode: exclusion to create a high-contrast, inverted color effect — overlapping elements produce a unique color inversion that shifts hues and intensifies contrast.
Quick implementation
/* Exclusion blend — creates high-contrast inversion */
.overlapping-element {
mix-blend-mode: exclusion;
}
/* Alternative: background-blend-mode for layered backgrounds */
.tinted-element {
background-color: oklch(0.65 0.2 300);
background-image: url('photo.jpg');
background-blend-mode: exclusion;
}Prompt this to your LLM
Includes role, constraints, framework variants, and edge cases.
You are a senior frontend engineer with expertise in CSS blend modes
and visual effects.
Goal: Implement an exclusion blend effect using mix-blend-mode: exclusion
to create a high-contrast, inverted color interaction between overlapping
elements.
Show two approaches:
1. mix-blend-mode: exclusion on a positioned element that overlaps another
element, creating the inversion effect where colors shift and contrast
intensifies in the overlap region
2. background-blend-mode: exclusion on an element with both background-color
and background-image, blending the color layer with the image
Explain:
- How exclusion math works: result = |source - destination| for each channel,
producing inversion where colors differ and no change where they match
- Why exclusion creates a "negative" or "photocopier" aesthetic — it inverts
colors based on their difference, creating high-contrast edges
- The difference between exclusion and difference blend modes (exclusion is
softer, with lower contrast than pure difference)
- When to use exclusion: creative overlays, artistic effects, hover states
that dramatically shift appearance, and text that adapts to complex backgrounds
Show an interactive example: a card with an overlay that uses exclusion on
hover, shifting the card's colors dramatically for a striking interaction.
Return only the CSS with inline comments.
Constraints:
- Use oklch() for all color values — no hex, rgb, or hsl
- Set color variables with CSS custom properties for easy theming
- Include a fallback for browsers without blend mode support (solid background)
- Ensure text remains readable after blending — test contrast ratios
- Use isolation: isolate on the container to keep the blend effect local
Framework variant (pick one):
A) Vanilla CSS — a .exclusion-overlay class that can be applied to any element
with a pseudo-element or sibling element to create the overlap
B) React component — an <ExclusionCard> that accepts children, baseColor,
overlayColor (oklch strings), and a trigger prop ("hover" | "active") to
control when the exclusion effect activates
Edge cases to handle:
- Dark backgrounds: exclusion inverts light colors toward white and dark
colors toward black — on a dark background, light text may become too
dark after blending; adjust opacity or use a lighter overlay
- Multiple overlapping layers: each additional layer compounds the inversion
effect unpredictably — limit to two overlapping elements or use isolation
- Color accuracy: exclusion produces hues that don't exist in the original
colors (e.g., green overlay on red base may produce cyan); this is
expected behavior but can be surprising — document it
- Print/PDF exports: blend modes may not render consistently in printed
output — provide a high-contrast static fallback for print mediaWhy this matters in 2026
Exclusion blending provides a distinctive visual language for interactive states. Unlike subtle opacity fades or color shifts, exclusion creates a dramatic, almost psychedelic inversion that signals a significant state change. In 2026's design landscape, where micro-interactions define user experience quality, exclusion offers a way to make hover states, active selections, and focus indicators feel substantial and memorable without adding new DOM elements or JavaScript.
The effect is particularly useful for dark mode interfaces, where traditional hover states (lightening a background) can reduce contrast. Exclusion inverts the relationship — dark becomes light and vice versa — maintaining or even improving readability while creating a striking visual transformation.
The logic
Exclusion blending uses the formula result = |source - destination| for each color channel. This absolute difference calculation produces unique behavior: identical colors result in black (difference of 0), while opposite extremes produce white (difference of 1). Midtones create a complex inversion where the result depends on how different the source and destination colors are.
Mathematically, this differs from difference blend mode only in that exclusion uses a quadratic formula that produces softer results: result = source + destination - 2 × source × destination. The practical outcome: exclusion feels more organic and less harsh than difference, making it better suited for decorative effects and user interface interactions where jarring transitions would be undesirable.
When applied to text over a complex background, exclusion causes the text color to adapt dynamically — light areas of the background produce dark text, dark areas produce light text. This creates a "cutout" effect where the text appears to be carved out of the background rather than sitting on top of it.
Accessibility & performance
Exclusion blending is GPU-accelerated in modern browsers and composites without triggering layout or paint operations. However, the dramatic color shifts can reduce text readability for users with color vision deficiencies or low vision. Always test exclusion effects with contrast analysis tools using the blended result, not the original colors.
For critical text that must remain readable regardless of background, consider using isolation: isolate on a wrapper to contain the blend effect, or provide a non-blended fallback for users who prefer reduced motion or high contrast. The prefers-contrast media query can detect users who need more predictable color relationships and disable exclusion effects accordingly.
Performance tip: exclusion blends are less expensive than blur-based effects but more costly than simple opacity changes. For frequently animated elements (like scroll-driven effects), test on lower-powered devices to ensure the compositor can maintain 60fps.