:modal
Targets an element that is in a 'modal' state, such as a <dialog> element opened with the showModal() method.
Syntax
/* Usage Example */
dialog:modal {
/* Adds a subtle drop shadow to the dialog when it is in modal mode */
box-shadow: 0 0 50px rgba(0,0,0,0.5);
border: none;
}:modal Browser support
Widely available
Since
2022 94% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
105+
103+
15.6+
105+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more