diff --git a/src/components/Editor/Editor.css b/src/components/Editor/Editor.css
index aed8d41c7..6f8e982f3 100644
--- a/src/components/Editor/Editor.css
+++ b/src/components/Editor/Editor.css
@@ -9,6 +9,7 @@
   --debug-line-error-border: rgb(255, 0, 0);
   --debug-expression-error-background: rgba(231, 116, 113, 0.3);
   --editor-header-height: 30px;
+  --highlight-line-duration: 1.5s;
 }

 .theme-dark .editor-wrapper {
@@ -25,7 +26,9 @@
   min-width: 0 !important;
 }

-.CodeMirror.cm-s-mozilla, .CodeMirror-scroll, .CodeMirror-sizer {
+.CodeMirror.cm-s-mozilla,
+.CodeMirror-scroll,
+.CodeMirror-sizer {
   overflow-anchor: none;
 }

@@ -260,8 +263,9 @@ debug-expression-error {
 .new-debug-line-error .CodeMirror-activeline-background {
   display: none;
 }
+
 .highlight-line .CodeMirror-line {
-  animation: fade-highlight-out 1.5s normal forwards;
+  animation: fade-highlight-out var(--highlight-line-duration) normal forwards;
 }

 @keyframes fade-highlight-out {
diff --git a/src/components/Editor/HighlightLine.js b/src/components/Editor/HighlightLine.js
index 9c6530d13..f4107f4f0 100644
--- a/src/components/Editor/HighlightLine.js
+++ b/src/components/Editor/HighlightLine.js
@@ -121,7 +121,18 @@ export class HighlightLine extends Component<Props> {
     }

     const doc = getDocument(sourceId);
+    // adds the line here, but does not remove it
     doc.addLineClass(editorLine, "line", "highlight-line");
+    this.resetHighlightLine(doc, editorLine);
+  }
+
+  resetHighlightLine(doc, editorLine) {
+    const style = getComputedStyle(document.querySelector(".editor-wrapper"));
+    const duration = style.getPropertyValue("--highlight-line-duration");
+    setTimeout(
+      () => doc && doc.removeLineClass(editorLine, "line", "highlight-line"),
+      duration
+    );
   }

   clearHighlightLine(selectedLocation: SourceLocation, selectedSource: Source) {