Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The ::view-transition CSS pseudo-element represents the root of the view transitions overlay, which contains all view transition snapshot groups and sits over the top of all other page content.

During a view transition, ::view-transition is included in the associated pseudo-element tree as explained in The view transition pseudo-element tree. It is the top-level node of this tree, and has one or more ::view-transition-groups as children.

::view-transition is given the following default styling in the UA stylesheet:

html::view-transition {
  position: fixed;
  inset: 0;

All ::view-transition-group pseudo-elements are positioned relative to the view transition root.


::view-transition {
  /* ... */


::view-transition {
  background-color: rgb(0 0 0 / 25%);


CSS View Transitions Module Level 1
# selectordef-view-transition

Browser compatibility

BCD tables only load in the browser

See also