diff --git a/src/js/modal.js b/src/js/modal.js
index a7b652168..3fbe0fbea 100644
--- a/src/js/modal.js
+++ b/src/js/modal.js
@@ -92,12 +92,13 @@ export class Modal {
   _styleForStep(step) {
     const modalOverlayOpening = this._modalOverlayOpening;
     const targetElement = getElementForStep(step);
+    const modalOverlayOpeningPadding = step.options.modalOverlayOpeningPadding || 0;
 
     if (targetElement) {
-      positionModalOpening(targetElement, modalOverlayOpening);
+      positionModalOpening(targetElement, modalOverlayOpening, modalOverlayOpeningPadding);
 
       this._onScreenChange = debounce(
-        positionModalOpening.bind(this, targetElement, modalOverlayOpening),
+        positionModalOpening.bind(this, targetElement, modalOverlayOpening, modalOverlayOpeningPadding),
         0
       );
 
diff --git a/src/js/utils/modal.js b/src/js/utils/modal.js
index c4481b1fa..aa1583d36 100644
--- a/src/js/utils/modal.js
+++ b/src/js/utils/modal.js
@@ -128,12 +128,17 @@ function createModalOverlay() {
  * @param {HTMLElement} targetElement The element the opening will expose
  * @param {SVGElement} openingElement The svg mask for the opening
  */
-function positionModalOpening(targetElement, openingElement) {
+function positionModalOpening(targetElement, openingElement, modalOverlayOpeningPadding) {
   if (targetElement.getBoundingClientRect && openingElement instanceof SVGElement) {
     const { x, y, width, height, left, top } = targetElement.getBoundingClientRect();
 
     // getBoundingClientRect is not consistent. Some browsers use x and y, while others use left and top
-    _setAttributes(openingElement, { x: x || left, y: y || top, width, height });
+    _setAttributes(openingElement, {
+      x: (x || left) - modalOverlayOpeningPadding,
+      y: (y || top) - modalOverlayOpeningPadding,
+      width: (width + (modalOverlayOpeningPadding * 2)),
+      height: (height + (modalOverlayOpeningPadding * 2))
+    });
   }
 }