:modal
Targets an element that is in a 'modal' state, such as a <dialog> element opened with the showModal() method.
Quick 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.
Safe to use without fallbacks.
105+
103+
15.6+
105+