How to Configure Strict CSS View-Transition-Old and New Filter Dropshadow in Google Chrome

Modern card-based user interfaces and modal overlays frequently leverage dynamic elevation to signify focus and depth hierarchy. When orchestrating navigational transitions between compact dashboard tiles and expanded detail dialogs with Chromium’s View Transition API, applying animated filter: drop-shadow(...) rules directly to ::view-transition-old and ::view-transition-new ensures hardware-accelerated volumetric lighting without mutating underlying DOM nodes.

Drop-Shadow Blending Mechanics in Chromium

Unlike box-shadow (which clips along rectangular bounding boundaries), filter: drop-shadow() conforms tightly to transparent alpha contours. When transitioning irregularly shaped icons or clipped card snapshots, animating drop-shadow parameters ensures that visual elevation shifts smoothly from subtle resting depths to elevated floating layers.

Authoring Strict Drop-Shadow Keyframes

Configure complementary elevation keyframes in your stylesheet:

::view-transition-old(elevated-card) {
  animation: 350ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both shadowCollapse;
}

::view-transition-new(elevated-card) {
  animation: 350ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both shadowExpand;
}

@keyframes shadowCollapse {
  from {
    filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.15)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.1));
    opacity: 1;
  }
  to {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08));
    opacity: 0.2;
  }
}

@keyframes shadowExpand {
  from {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08));
    opacity: 0.2;
  }
  to {
    filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.15)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.1));
    opacity: 1;
  }
}

Bounding Layer Padding Protection

Because expanding blur radii can exceed the initial snapshot bounding box, ensure the view-transition container accommodates shadow expansion without clipping:

::view-transition-group(elevated-card) {
  overflow: visible;
}

Auditing in Chrome DevTools

Open Chrome DevTools > Rendering panel and enable Layer Borders to confirm that GPU texture buffers allocate adequate bounding margins during filter interpolation.