diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 77d5f17d2f..d74c7a7d8e 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -34,6 +34,15 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t > If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information. +> `ion-modal` works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of `0`. This is to avoid the effect of shadows and backdrops getting darker with each added modal. This can be changed by setting the `--box-shadow` and `--backdrop-opacity` CSS variables: +``` +ion-modal.stack-modal { + --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); + --backdrop-opacity: var(--ion-backdrop-opacity, 0.32); +} +``` + +