diff --git a/guacamole/src/main/webapp/app/index/styles/fatal-page-error.css b/guacamole/src/main/webapp/app/index/styles/fatal-page-error.css
index a6e28ba1f..9a50e9c9b 100644
--- a/guacamole/src/main/webapp/app/index/styles/fatal-page-error.css
+++ b/guacamole/src/main/webapp/app/index/styles/fatal-page-error.css
@@ -59,3 +59,18 @@
     margin: 0 0.25em;
     margin-bottom: -0.2em;
 }
+
+/* Ensure fatal error is initially hidden, fading the error message in when
+ * needed */
+
+.fatal-page-error-outer {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity, visibility;
+    transition-duration: 0.25s;
+}
+
+.shown.fatal-page-error-outer {
+    visibility: visible;
+    opacity: 1;
+}
diff --git a/guacamole/src/main/webapp/index.html b/guacamole/src/main/webapp/index.html
index ff920dbd5..1d51606a9 100644
--- a/guacamole/src/main/webapp/index.html
+++ b/guacamole/src/main/webapp/index.html
@@ -58,7 +58,7 @@
         </div>
 
         <!-- Absolute fatal error -->
-        <div ng-if="fatalError" class="fatal-page-error-outer">
+        <div ng-if="fatalError" ng-class="{shown: fatalError}" class="fatal-page-error-outer">
             <div class="fatal-page-error-middle">
                 <div class="fatal-page-error">
                     <h1 translate="APP.DIALOG_HEADER_ERROR"></h1>