diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
index 9469dd5149a7e7..9951510f916a30 100644
--- a/packages/vite/src/client/overlay.ts
+++ b/packages/vite/src/client/overlay.ts
@@ -104,6 +104,7 @@ pre::-webkit-scrollbar {
   color: #999;
   border-top: 1px dotted #999;
   padding-top: 13px;
+  line-height: 1.8;
 }
 
 code {
@@ -116,6 +117,21 @@ code {
   text-decoration: underline;
   cursor: pointer;
 }
+
+kbd {
+  line-height: 1.5;
+  font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.75rem;
+  font-weight: 700;
+  background-color: rgb(38, 40, 44);
+  color: rgb(166, 167, 171);
+  padding: 0.15rem 0.3rem;
+  border-radius: 0.25rem;
+  border-width: 0.0625rem 0.0625rem 0.1875rem;
+  border-style: solid;
+  border-color: rgb(54, 57, 64);
+  border-image: initial;
+}
 </style>
 <div class="backdrop" part="backdrop">
   <div class="window" part="window">
@@ -124,7 +140,7 @@ code {
     <pre class="frame" part="frame"></pre>
     <pre class="stack" part="stack"></pre>
     <div class="tip" part="tip">
-      Click outside or fix the code to dismiss.<br>
+      Click outside, press <kbd>Esc</kbd> key, or fix the code to dismiss.<br>
       You can also disable this overlay by setting
       <code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">vite.config.js.</code>
     </div>