::view-transition CSS pseudo-element
Baseline
2025
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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-group()s as children.
::view-transition is given the following default styling in the UA stylesheet:
:root::view-transition {
position: fixed;
inset: 0;
}
All ::view-transition-group() pseudo-elements are positioned relative to the view transition root.
Syntax
::view-transition {
/* ... */
}
Examples
::view-transition {
background-color: rgb(0 0 0 / 25%);
}
Specifications
| Specification |
|---|
| CSS View Transitions Module Level 1 # selectordef-view-transition |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
::view-transition
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support