diff --git a/index.html b/index.html
index 8ac475efd..458fc7522 100644
--- a/index.html
+++ b/index.html
@@ -1683,7 +1683,7 @@ el.style.setProperty('--max-height', height + 'px')
           </div>
           <div class="snippet">
             <h3 id="hover-shadow-box-animation"><span>Hover Shadow Box Animation</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
-            <p>Creates a shadow box around the text whern it is hovered.</p>
+            <p>Creates a shadow box around the text when it is hovered.</p>
             <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;p class="hover-shadow-box-animation"&gt;Box it!&lt;/p&gt;
 </code></pre>
             <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.hover-shadow-box-animation {
diff --git a/snippets/hover-shadow-box-animation.md b/snippets/hover-shadow-box-animation.md
index 5167c84e6..cebd752a6 100644
--- a/snippets/hover-shadow-box-animation.md
+++ b/snippets/hover-shadow-box-animation.md
@@ -1,6 +1,6 @@
 ### Hover Shadow Box Animation
 
-Creates a shadow box around the text whern it is hovered.
+Creates a shadow box around the text when it is hovered.
 
 #### HTML