diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js
index 169a4dcb240..a473f56b147 100644
--- a/addons/web_editor/static/src/js/common/utils.js
+++ b/addons/web_editor/static/src/js/common/utils.js
@@ -135,15 +135,30 @@ function _getNumericAndUnit(value) {
  * @returns {boolean}
  */
 function _areCssValuesEqual(value1, value2, cssProp, $target) {
-    // If not colors, they will be left untouched
-    value1 = ColorpickerWidget.normalizeCSSColor(value1);
-    value2 = ColorpickerWidget.normalizeCSSColor(value2);
-
     // String comparison first
     if (value1 === value2) {
         return true;
     }
 
+    // It could be a CSS variable, in that case the actual value has to be
+    // retrieved before comparing.
+    if (value1.startsWith('var(--')) {
+        value1 = _getCSSVariableValue(value1.substring(6, value1.length - 1));
+    }
+    if (value2.startsWith('var(--')) {
+        value2 = _getCSSVariableValue(value2.substring(6, value2.length - 1));
+    }
+    if (value1 === value2) {
+        return true;
+    }
+
+    // They may be colors, normalize then re-compare the resulting string
+    const color1 = ColorpickerWidget.normalizeCSSColor(value1);
+    const color2 = ColorpickerWidget.normalizeCSSColor(value2);
+    if (color1 === color2) {
+        return true;
+    }
+
     // Convert the second value in the unit of the first one and compare
     // floating values
     const data = _getNumericAndUnit(value1);