How to Configure Strict CSS View-Transition Mix-Blend-Mode in Google Chrome

During page transitions orchestrated with the View Transition API, Chromium composites two snapshot layers simultaneously: ::view-transition-old (the outgoing visual capture) and ::view-transition-new (the incoming live or rasterized capture). By default, the browser assigns mix-blend-mode: plus-lighter to both pseudo-elements. This blending mode is designed to produce an optically smooth crossfade where overlapping opaque regions do not briefly darken or flash mid-animation. However, when transitioning vibrant photography, high-contrast typography, or transparent alpha-layer elements, plus-lighter can result in over-saturated blown-out highlights or muddy colour artifacts.

By configuring explicit mix-blend-mode values—such as normal, multiply, or screen—combined with isolated stacking contexts via isolation: isolate, web developers can control the exact chromatic compositing behavior in Google Chrome.

Default Chromium View Transition Blending Architecture

Chromium’s user-agent stylesheet sets standard blending rules on the pseudo-element image pair:

::view-transition-image-pair(*) {
    isolation: isolate;
}

::view-transition-old(*),
::view-transition-new(*) {
    mix-blend-mode: plus-lighter;
}

While plus-lighter prevents the perceived dip in luminance typical of simple opacity crossfades, it adds colour values together. When text or solid icons crossfade over rich backgrounds, the additive blend can make text outlines flare unnaturally white before settling into their final colour.

Configuring Strict Blending in Custom Stylesheets

To eliminate color flares and maintain color fidelity, override the default blend mode with mix-blend-mode: normal and manage the crossfade solely using standard opacity or clip paths:

/* Override plus-lighter for crisp, authentic color rendering */
::view-transition-old(hero-banner),
::view-transition-new(hero-banner) {
    mix-blend-mode: normal;
    height: 100%;
    width: 100%;
}

/* Control layering order explicitly */
::view-transition-old(hero-banner) {
    z-index: 1;
    animation: 300ms ease-out both fade-out;
}

::view-transition-new(hero-banner) {
    z-index: 2;
    animation: 400ms cubic-bezier(0.16, 1, 0.3, 1) both fade-in;
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

Artistic Blending Effects with Screen and Multiply

For creative transitions, such as switching between dark and light themes, specialized blend modes provide stylized cinematic effects:

/* Atmospheric Dark-to-Light Theme Transition */
html[data-theme="dark"]::view-transition-old(root) {
    mix-blend-mode: multiply;
}

html[data-theme="dark"]::view-transition-new(root) {
    mix-blend-mode: screen;
}

Inspecting Blend Modes in Chrome DevTools

To audit blend mode rendering inside Google Chrome:

1. Press F12 to open Chrome DevTools.
2. Open the Animations panel via Ctrl+Shift+P > Show Animations.
3. Trigger your transition and scrub the animation timeline to 50% progress.
4. In the Elements tree, expand ::view-transition-image-pair.
5. Select ::view-transition-old and inspect the Computed styles panel to verify that mix-blend-mode: normal is active and not overridden by user-agent defaults.

Configuring strict blend modes prevents chromatic distortions and guarantees professional-grade visual transitions across modern web applications.