diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index a0a5c5dca5..c01783bb86 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -594,7 +594,7 @@
     --size-color-swatch: 1em;
     --grid-gap-color-swatch: 1em;
     --padding-color-swatch-list: 0.6666em;
-    --color-background-custom-swatch-gradient: conic-gradient(
+    --gradient-custom-swatch: conic-gradient(
         from 0deg at 50% 50% in oklch longer hue,
         oklch(70% 0.3 0deg) 0%,
         oklch(70% 0.3 0deg) 100%
@@ -1176,36 +1176,36 @@
         hsl(0deg 0% 67%)
     );
     --color-compose-scroll-icon: hsl(0deg 0% 50%);
-    --color-compose-background-scroll-backward: linear-gradient(
+    --gradient-compose-scroll-backward: linear-gradient(
         90deg,
         light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24%)) 35%,
         light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24% / 76.9%)) 50%,
         transparent 100%
     );
-    --color-compose-background-scroll-backward-hover: linear-gradient(
+    --gradient-compose-scroll-backward-hover: linear-gradient(
         90deg,
         light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28%)) 35%,
         light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28% / 76.9%)) 50%,
         transparent 100%
     );
-    --color-compose-background-scroll-backward-active: linear-gradient(
+    --gradient-compose-scroll-backward-active: linear-gradient(
         90deg,
         light-dark(hsl(234deg 100% 90%), hsl(234deg 35% 30%)) 45%,
         transparent 100%
     );
-    --color-compose-background-scroll-forward: linear-gradient(
+    --gradient-compose-scroll-forward: linear-gradient(
         90deg,
         transparent 0%,
         light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24% / 76.9%)) 50%,
         light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24%)) 65%
     );
-    --color-compose-background-scroll-forward-hover: linear-gradient(
+    --gradient-compose-scroll-forward-hover: linear-gradient(
         90deg,
         transparent 0%,
         light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28% / 76.9%)) 50%,
         light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28%)) 65%
     );
-    --color-compose-background-scroll-forward-active: linear-gradient(
+    --gradient-compose-scroll-forward-active: linear-gradient(
         90deg,
         transparent 0%,
         light-dark(hsl(234deg 100% 90%), hsl(234deg 35% 30%)) 55%
diff --git a/web/styles/color_picker.css b/web/styles/color_picker.css
index b532f4a817..4d94267723 100644
--- a/web/styles/color_picker.css
+++ b/web/styles/color_picker.css
@@ -42,7 +42,7 @@
 
 .custom-color-swatch-icon {
     border-radius: 50%;
-    background: var(--color-background-custom-swatch-gradient);
+    background: var(--gradient-custom-swatch);
 }
 
 .color-picker-popover .message-header-contents {
diff --git a/web/styles/compose.css b/web/styles/compose.css
index 54b89a9cf6..397866f6ed 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -534,14 +534,14 @@
     grid-area: scroller-backward;
     justify-content: flex-start;
     border-radius: 0 0 0 3px;
-    background: var(--color-compose-background-scroll-backward);
+    background: var(--gradient-compose-scroll-backward);
 
     &:hover {
-        background: var(--color-compose-background-scroll-backward-hover);
+        background: var(--gradient-compose-scroll-backward-hover);
     }
 
     &:active {
-        background: var(--color-compose-background-scroll-backward-active);
+        background: var(--gradient-compose-scroll-backward-active);
 
         .scroller-backward-icon {
             /* Subtly shift arrow in scroll direction. */
@@ -554,14 +554,14 @@
     grid-area: scroller-forward;
     justify-content: flex-end;
     border-radius: 0 0 3px;
-    background: var(--color-compose-background-scroll-forward);
+    background: var(--gradient-compose-scroll-forward);
 
     &:hover {
-        background: var(--color-compose-background-scroll-forward-hover);
+        background: var(--gradient-compose-scroll-forward-hover);
     }
 
     &:active {
-        background: var(--color-compose-background-scroll-forward-active);
+        background: var(--gradient-compose-scroll-forward-active);
 
         .scroller-forward-icon {
             /* Subtly shift arrow in scroll direction. */