overlay
The overlay CSS property, used as an allow-discrete CSS transition, prevents a top layer element, such as a popover or a <dialog>, from being removed from the top layer before it has finished animating. You can't set the value of the overlay property; only use it as transition property. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The overlay CSS property, used as an allow-discrete CSS transition, prevents a top layer element, such as a popover or a <dialog>, from being removed from the top layer before it has finished animating. You can't set the value of the overlay property; only use it as transition property. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
overlay Experimental | 117 | 117 | | | 117 | |
auto Experimental | 117 | 117 | | | 117 | |
none Experimental | 117 | 117 | | | 117 | |
Syntax
dialog {
transition: opacity 0.3s, overlay 0.3s allow-discrete;
}
dialog:not([open]) {
opacity: 0;
}Live demo
Use cases
Use overlay
Use overlay when the default CSS behavior is not expressive enough for the component or layout you are building.
Handle edge cases
Apply overlay to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test overlay in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using overlay does not make content harder to perceive, understand, or operate in assistive contexts.
Related links
Powered by web-features