diff --git a/src/components/MarkdownUi.vue b/src/components/MarkdownUi.vue
index 2e2c46c7..55c9b2d4 100644
--- a/src/components/MarkdownUi.vue
+++ b/src/components/MarkdownUi.vue
@@ -7,15 +7,16 @@
   >
     <div
       v-if="editable && currentMode !== 'read'"
-      class="toolbar-overlay"
-      :class="{ 'left': !arrivedState.left }"
+      class="toolbar-overlay left"
+      :class="{ 'overlay-visible': !arrivedState.left }"
     />
     <div
       v-if="editable && currentMode !== 'read'"
-      class="toolbar-overlay"
-      :class="{ 'right': !arrivedState.right }"
+      class="toolbar-overlay right"
+      :class="{ 'overlay-visible': !arrivedState.right }"
     />
     <MarkdownToolbar
+      v-if="editable && currentMode !== 'read'"
       ref="toolbar"
       @change-mode="(mode: MarkdownMode) => currentMode = mode"
       @format-selection="formatSelection"
@@ -516,6 +517,16 @@ const markdownPanesMaxHeight = computed((): string => `${props.maxHeight}px`)
       display: block;
     }
 
+    &.left,
+    &.right {
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+    }
+
+    &.overlay-visible {
+      opacity: 1;
+    }
+
     &.left {
       background: linear-gradient(to right, rgba(#000, 0.1), rgba(#000, 0));
       border-top-left-radius: var(--kui-border-radius-40, $kui-border-radius-40);