diff --git a/ignite-html-toast.js b/ignite-html-toast.js
index ae899d7..8c98faa 100644
--- a/ignite-html-toast.js
+++ b/ignite-html-toast.js
@@ -74,7 +74,7 @@ class Toast {
         var temp = document.createElement('div');
         temp.innerHTML = `
             <div class="ignite-html-toast ${type ? type : ""}" style="display: flex; align-items: center; flex-direction: column; left: 50%; top: 100%; position: absolute; transform: translate(-50%, -100%); z-index: 999999; width: 100%; padding: 2em 1em 2em 1em; background-color: transparent;">
-                <div style="box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); border-radius: 7em; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; background-color: #fff;">
+                <div style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius: 7em; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; background-color: #fff;">
                     <div class="icon" style="${!icon ? "display: none;" : "display: flex;"}font-size: 1.5em; background-color: ${color}; border-radius: 100%; min-width: 1.5em; min-height: 1.5em; align-items: center; justify-content: center; color: #fff;">${icon ? icon : ""}</div>
                     <div class="message" style="text-align: center;">${content ? content : ""}</div>
                     <button class="close" onClick="this.parentElement.parentElement.remove();" style="${!closable ? "display: none;" : ""} background-color: transparent; border: none; font-size: 1.75em; color: rgba(0,0,0,0.5);">&times;</button>