diff --git a/assets/newspack-ui/scss/_mixins.scss b/assets/newspack-ui/scss/_mixins.scss
new file mode 100644
index 0000000000..0795945d2a
--- /dev/null
+++ b/assets/newspack-ui/scss/_mixins.scss
@@ -0,0 +1,9 @@
+@mixin newspack-ui-elevation($size: 1) {
+    @if $size == 1 {
+        box-shadow: 0 1px 10px rgba( 0, 0, 0, 0.07 );
+    } @else if $size == 2 {
+        box-shadow: 0 2px 20px rgba( 0, 0, 0, 0.14 );
+    }  @else if $size == 3 {
+        box-shadow: 0 3px 30px rgba( 0, 0, 0, 0.21 );
+    }
+}
\ No newline at end of file
diff --git a/assets/newspack-ui/scss/_modals.scss b/assets/newspack-ui/scss/_modals.scss
index ab0127204f..a188d63028 100644
--- a/assets/newspack-ui/scss/_modals.scss
+++ b/assets/newspack-ui/scss/_modals.scss
@@ -1,3 +1,5 @@
+@use 'mixins';
+
 .newspack-ui {
 	&__modal-container {
 		position: fixed;
@@ -14,8 +16,8 @@
 			z-index: 1;
 			inset: 0;
 			opacity: 0;
-			background: rgba( 0, 0, 0, 0.5 );
-			transition: opacity 0.1s linear;
+			background: rgba( 0, 0, 0, 0.7 );
+			transition: opacity 0.125s linear;
 		}
 		.newspack-ui__modal {
 			position: relative;
@@ -23,7 +25,8 @@
 			width: 100%;
 			transform: translateY( 50px );
 			opacity: 0;
-			transition: transform 0.1s linear, opacity 0.1s linear;
+			transition: transform 0.125s linear, opacity 0.125s linear;
+			@include mixins.newspack-ui-elevation(3);
 		}
 		&[data-state='open'] {
 			z-index: 99999;