diff --git a/apps/builder/app/canvas/shared/styles.ts b/apps/builder/app/canvas/shared/styles.ts
index 63cc1390de7c..48e359c691cf 100644
--- a/apps/builder/app/canvas/shared/styles.ts
+++ b/apps/builder/app/canvas/shared/styles.ts
@@ -32,6 +32,7 @@ import {
   $instances,
   $props,
   $registeredComponentMetas,
+  $selectedInstanceSelector,
   $selectedStyleState,
   $styleSourceSelections,
   $styles,
@@ -43,6 +44,7 @@ import { canvasApi } from "~/shared/canvas-api";
 import { $selectedInstance, $selectedPage } from "~/shared/awareness";
 import { findAllEditableInstanceSelector } from "~/shared/instance-utils";
 import type { InstanceSelector } from "~/shared/tree-utils";
+import { getVisibleElementsByInstanceSelector } from "~/shared/dom-utils";
 
 const userSheet = createRegularStyleSheet({ name: "user-styles" });
 const stateSheet = createRegularStyleSheet({ name: "state-styles" });
@@ -580,18 +582,26 @@ const subscribeStateStyles = () => {
 
 const subscribeEphemeralStyle = () => {
   // track custom properties added on previous ephemeral update
-  const appliedEphemeralDeclarations = new Map<string, StyleDecl>();
+  const appliedEphemeralDeclarations = new Map<
+    string,
+    [StyleDecl, HTMLElement[]]
+  >();
 
   return $ephemeralStyles.subscribe((ephemeralStyles) => {
     const instance = $selectedInstance.get();
-    if (instance === undefined) {
+    const instanceSelector = $selectedInstanceSelector.get();
+
+    if (instance === undefined || instanceSelector === undefined) {
       return;
     }
 
     // reset ephemeral styles
     if (ephemeralStyles.length === 0) {
       canvasApi.resetInert();
-      for (const styleDecl of appliedEphemeralDeclarations.values()) {
+      for (const [
+        styleDecl,
+        elements,
+      ] of appliedEphemeralDeclarations.values()) {
         // prematurely apply last known ephemeral update to user stylesheet
         // to avoid lag because of delay between deleting ephemeral style
         // and sending style patch (and rendering)
@@ -606,6 +616,10 @@ const subscribeEphemeralStyle = () => {
         document.documentElement.style.removeProperty(
           getEphemeralProperty(styleDecl)
         );
+
+        for (const element of elements) {
+          element.style.removeProperty(getEphemeralProperty(styleDecl));
+        }
       }
       userSheet.setTransformer($transformValue.get());
       userSheet.render();
@@ -624,6 +638,17 @@ const subscribeEphemeralStyle = () => {
           getEphemeralProperty(styleDecl),
           toValue(styleDecl.value, $transformValue.get())
         );
+
+        // We need to apply the custom property to the selected element as well.
+        // Otherwise, variables defined on it will not be visible on documentElement.
+        const elements = getVisibleElementsByInstanceSelector(instanceSelector);
+        for (const element of elements) {
+          element.style.setProperty(
+            getEphemeralProperty(styleDecl),
+            toValue(styleDecl.value, $transformValue.get())
+          );
+        }
+
         // render temporary rule for instance with var()
         // rendered with "all" breakpoint and without state
         // to reflect changes in canvas without user interaction
@@ -655,7 +680,7 @@ const subscribeEphemeralStyle = () => {
             });
           }
         }
-        appliedEphemeralDeclarations.set(styleDeclKey, styleDecl);
+        appliedEphemeralDeclarations.set(styleDeclKey, [styleDecl, elements]);
       }
       // avoid stylesheet rerendering on every ephemeral update
       if (ephemetalSheetUpdated) {