diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
index 3c89d5c86f9e..297addb09bfb 100644
--- a/packages/main/src/Popup.ts
+++ b/packages/main/src/Popup.ts
@@ -369,6 +369,11 @@ abstract class Popup extends UI5Element {
 
 		this._addOpenedPopup();
 
+		this.classList.add("ui5-popup-opening");
+		setTimeout(() => {
+			this.classList.remove("ui5-popup-opening");
+		}, 50);
+
 		this.open = true;
 
 		// initial focus, if focused element is statically created
diff --git a/packages/main/src/themes/Popup.css b/packages/main/src/themes/Popup.css
index 9da9a57ab365..649241d4af4f 100644
--- a/packages/main/src/themes/Popup.css
+++ b/packages/main/src/themes/Popup.css
@@ -9,4 +9,8 @@
 
 :host(:focus-visible) {
     outline: none;
+}
+
+:host(.ui5-popup-opening) {
+    opacity: 0.1;
 }
\ No newline at end of file
diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
index 119577f212e3..59607ee70c7b 100644
--- a/packages/main/test/pages/Dialog.html
+++ b/packages/main/test/pages/Dialog.html
@@ -95,6 +95,11 @@
 		<br>
 		<br>
 		<ui5-button id="open-big-content">Open dialog with big content</ui5-button>
+		<br>
+		<br>
+		<ui5-button id="open-big-dynamic-content">Open dynamic dialog with big content</ui5-button>
+		<br>
+		<br>
 	</div>
 	<ui5-block-layer></ui5-block-layer>
 
@@ -1127,6 +1132,72 @@
 		document.getElementById("open-big-content").addEventListener("click", function () {
 			window["dlgBigContent"].open = true;
 		});
+
+		document.getElementById("open-big-dynamic-content").addEventListener("click", function () {
+			const dialog = document.createElement("ui5-dialog");
+			const child1 = `
+				<div slot="header" design="Header">
+					<h3>Random Title</h3>
+				</div>
+			`;
+
+			const child2 = `
+				<div>
+					<div>
+						<div>
+							<div>
+								<div>
+									<img src="randomImage.png">
+								</div>
+							</div>
+							<div>
+								<div>Contact RANDOM CORP</div>
+								<div>Some subtitle</div>
+							</div>
+						</div>
+					</div>
+					<form>
+						<div>
+							<div>
+								<p>Subscribe to our newsletter</p>
+								<small>No spam, only updates.</small>
+							</div>
+						</div>
+						<div>
+							<small>Hint: Use a valid code</small>
+						</div>
+						<div>Your Info</div>
+						<div>
+							<div>
+							</div>
+							<div>
+							</div>
+						</div>
+						<div>Company Info</div>
+						<div>
+							<div>
+							</div>
+							<div>
+							</div>
+						</div>
+						<div></div>
+						<div>
+							<div>
+								<span>
+									I agree to the random terms and conditions.
+										Read Privacy Policy.
+								</span>
+							</div>
+						</div>
+						<div></div>
+					</form>
+				</div>
+			`;
+
+			dialog.innerHTML = child1 + child2;
+			document.body.appendChild(dialog);
+			dialog.open = true;
+		});
 	</script>
 </body>