diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index 06f72d6bf9..34a4d3ab76 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -42,7 +42,12 @@
       <video
         v-if="!videoError"
         :src="currentVideoUrl"
-        :class="cn('block size-full object-contain', showLoader && 'invisible')"
+        :class="
+          cn('block size-full object-contain', {
+            invisible: showLoader,
+            'opacity-50 grayscale': props.inactive
+          })
+        "
         controls
         loop
         playsinline
@@ -126,6 +131,8 @@ interface VideoPreviewProps {
   readonly imageUrls: readonly string[] // Named imageUrls for consistency with parent components
   /** Optional node ID for context-aware actions */
   readonly nodeId?: string
+  /** Whether the node is bypassed or muted */
+  readonly inactive?: boolean
 }
 
 const props = defineProps<VideoPreviewProps>()
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 538a5a5d34..726d9775b4 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -43,7 +43,11 @@
         ref="currentImageEl"
         :src="currentImageUrl"
         :alt="imageAltText"
-        class="block size-full object-contain pointer-events-none"
+        :class="
+          cn('block size-full object-contain pointer-events-none', {
+            'opacity-50 grayscale': props.inactive
+          })
+        "
         @load="handleImageLoad"
         @error="handleImageError"
       />
@@ -128,12 +132,15 @@ import { downloadFile } from '@/base/common/downloadUtil'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+import { cn } from '@/utils/tailwindUtil'
 
 interface ImagePreviewProps {
   /** Array of image URLs to display */
   readonly imageUrls: readonly string[]
   /** Optional node ID for context-aware actions */
   readonly nodeId?: string
+  /** Whether the node is bypassed or muted */
+  readonly inactive?: boolean
 }
 
 const props = defineProps<ImagePreviewProps>()
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 9de9672602..8a3f850c95 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -113,11 +113,18 @@
         <NodeWidgets v-if="nodeData.widgets?.length" :node-data="nodeData" />
 
         <div v-if="hasCustomContent" class="min-h-0 flex-1 flex">
-          <NodeContent :node-data="nodeData" :media="nodeMedia" />
+          <NodeContent
+            :node-data="nodeData"
+            :media="nodeMedia"
+            :inactive="bypassed || muted"
+          />
         </div>
         <!-- Live mid-execution preview images -->
         <div v-if="shouldShowPreviewImg" class="min-h-0 flex-1 px-4">
-          <LivePreview :image-url="latestPreviewUrl || null" />
+          <LivePreview
+            :image-url="latestPreviewUrl || null"
+            :inactive="bypassed || muted"
+          />
         </div>
       </div>
     </template>
diff --git a/src/renderer/extensions/vueNodes/components/LivePreview.vue b/src/renderer/extensions/vueNodes/components/LivePreview.vue
index a4b090b19d..de76c7a9e3 100644
--- a/src/renderer/extensions/vueNodes/components/LivePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LivePreview.vue
@@ -18,7 +18,11 @@
         v-else
         :src="imageUrl"
         :alt="$t('g.liveSamplingPreview')"
-        class="pointer-events-none h-full w-full object-contain object-center"
+        :class="
+          cn('pointer-events-none h-full w-full object-contain object-center', {
+            'opacity-50 grayscale': props.inactive
+          })
+        "
         @load="handleImageLoad"
         @error="handleImageError"
       />
@@ -38,9 +42,13 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
+import { cn } from '@/utils/tailwindUtil'
+
 interface LivePreviewProps {
   /** Image URL to display */
   imageUrl: string | null
+  /** Whether the node is bypassed or muted */
+  inactive?: boolean
 }
 
 const props = defineProps<LivePreviewProps>()
diff --git a/src/renderer/extensions/vueNodes/components/NodeContent.vue b/src/renderer/extensions/vueNodes/components/NodeContent.vue
index ed92251454..a68a13d9fc 100644
--- a/src/renderer/extensions/vueNodes/components/NodeContent.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeContent.vue
@@ -9,12 +9,14 @@
         v-if="hasMedia && media?.type === 'video'"
         :image-urls="media.urls"
         :node-id="nodeId"
+        :inactive="props.inactive"
         class="mt-2"
       />
       <ImagePreview
         v-else-if="hasMedia && media?.type === 'image'"
         :image-urls="media.urls"
         :node-id="nodeId"
+        :inactive="props.inactive"
         class="mt-2"
       />
     </slot>
@@ -37,6 +39,8 @@ interface NodeContentProps {
     type: 'image' | 'video'
     urls: string[]
   }
+  /** Whether the node is bypassed or muted */
+  inactive?: boolean
 }
 
 const props = defineProps<NodeContentProps>()