diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn
index 7d01806eb..3b7dbedc6 100644
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -57,7 +57,6 @@
 
         # Images
         content/browser/zen-images/gradient.png                 (content/zen-images/gradient.png)
-        content/browser/zen-images/gradient-display.png         (content/zen-images/gradient-display.png)
         content/browser/zen-images/brand-header.svg             (content/zen-images/brand-header.svg)
         content/browser/zen-images/layouts/collapsed.png        (content/zen-images/layouts/collapsed.png)
         content/browser/zen-images/layouts/multiple-toolbar.png (content/zen-images/layouts/multiple-toolbar.png)
diff --git a/src/browser/base/content/zen-images/gradient-display.png b/src/browser/base/content/zen-images/gradient-display.png
deleted file mode 100644
index c22d8f9fd..000000000
Binary files a/src/browser/base/content/zen-images/gradient-display.png and /dev/null differ
diff --git a/src/browser/base/content/zen-popupset.inc.xhtml b/src/browser/base/content/zen-popupset.inc.xhtml
index aeabcba91..babf2a244 100644
--- a/src/browser/base/content/zen-popupset.inc.xhtml
+++ b/src/browser/base/content/zen-popupset.inc.xhtml
@@ -85,6 +85,20 @@
 <panel flip="side" type="arrow" orient="vertical" id="PanelUI-zen-gradient-generator" position="bottomright topright" mainview="true" side="left" onpopuphidden="gZenThemePicker.handlePanelClose();" onpopupshowing="gZenThemePicker.handlePanelOpen();">
   <panelmultiview id="PanelUI-zen-gradient-generator-multiview" mainViewId="PanelUI-zen-gradient-generator-view">
     <panelview id="PanelUI-zen-gradient-generator-view" class="PanelUI-subView zen-theme-picker" role="document" mainview-with-header="true" has-custom-header="true">
+      <hbox>
+        <hbox id="PanelUI-zen-gradient-generator-predefined">
+          <box data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, rgb(117, 255, 136), rgb(60, 66, 58));"></box>
+          <box data-algo="analogous" data-num-dots="3" data-position="167,201" style="background: linear-gradient(135deg, #a03fe0, #382b5c);"></box>
+          <box data-algo="analogous" data-num-dots="3" data-position="90,170" style="background: linear-gradient(135deg, #c57aa3, #af824f);"></box>
+          <box data-algo="splitComplementary" data-num-dots="3" data-position="83,103" style="background: linear-gradient(135deg, #1e90ff, #968a4a);"></box>
+          <box data-algo="analogous" data-num-dots="3" data-position="219,99" style="background: linear-gradient(135deg, #a07a48, #ab80e4);"></box>
+          <box data-algo="float" data-num-dots="1" data-position="196,176" style="background: #7bcbda;"></box>
+          <box data-algo="float" data-num-dots="1" data-position="116,167" style="background: #be9ac9;"></box>
+          <box data-algo="float" data-num-dots="1" data-position="122,110" style="background: #cdcea1;"></box>
+          <box data-algo="float" data-num-dots="1" data-position="181,83" style="background: #6ac593;"></box>
+          <box data-algo="complementary" data-num-dots="3" data-position="82,112" style="background: linear-gradient(135deg, #1e90ff, #cfb179);"></box>
+        </hbox>
+      </hbox>
       <hbox class="zen-theme-picker-gradient">
         <div id="PanelUI-zen-gradient-generator-color-actions">
           <button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton">
@@ -104,7 +118,6 @@
             <html:input type="range" min="0" max="1" value="0.5" step="0.05" oninput="gZenThemePicker.onOpacityChange(event);" id="PanelUI-zen-gradient-generator-opacity" />
           </vbox>
           <vbox>
-            <label data-l10n-id="zen-panel-ui-gradient-generator-texture-text"></label>
             <html:input type="range" min="0" max="1" value="0.5" step="0.05" oninput="gZenThemePicker.onTextureChange(event);" id="PanelUI-zen-gradient-generator-texture" />
           </vbox>
         </hbox>
diff --git a/src/browser/base/content/zen-styles/zen-gradient-generator.css b/src/browser/base/content/zen-styles/zen-gradient-generator.css
index f397eb229..2fe3087bd 100644
--- a/src/browser/base/content/zen-styles/zen-gradient-generator.css
+++ b/src/browser/base/content/zen-styles/zen-gradient-generator.css
@@ -62,6 +62,32 @@
   gap: 10px;
 }
 
+#PanelUI-zen-gradient-generator-predefined {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  margin: 5px 5px 10px 0;
+
+  & > box {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    cursor: pointer;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      top: 0;
+      left: 0;
+      outline: 2px solid var(--zen-toolbar-element-bg);
+      border-radius: 50%;
+      pointer-events: none;
+    }
+  }
+}
+
 #PanelUI-zen-gradient-generator-custom-list {
   margin-top: 15px;
 
@@ -135,43 +161,15 @@
   position: relative;
   border-radius: calc(var(--zen-border-radius) - 2px);
   overflow: hidden;
-  border: 1px solid var(--zen-colors-border);
   border-radius: var(--zen-border-radius);
 
   min-height: calc(var(--panel-width) - var(--panel-padding) * 2);
   margin-bottom: 20px;
 
-  background: var(--zen-theme-picker-gradient-image) center center / cover no-repeat;
-
-  &::before {
-    background: color-mix(in srgb, var(--zen-themed-toolbar-bg) 70%, transparent 30%);
-    backdrop-filter: blur(10px);
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    box-shadow: 0 0 0 1px 1px var(--zen-colors-border);
-    width: 100%;
-    height: 100%;
-  }
-
-  &::after {
-    z-index: 0;
-    position: absolute;
-    inset: 0;
-    --zen-theme-picker-lines-color: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
-    background-image: linear-gradient(to right, var(--zen-theme-picker-lines-color) 1px, transparent 1px),
-      linear-gradient(to bottom, var(--zen-theme-picker-lines-color) 1px, transparent 1px);
-    background-size: 20px 20px;
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0.1;
-  }
+  background: var(--zen-toolbar-element-bg);
+  background-image: radial-gradient(light-dark(rgba(0, 0, 0, 0.05), rgba(0,0,0,.225)) 1px, transparent 0);
+  background-position: -19px -19px;
+  background-size: 10px 10px;
 
   & .zen-theme-picker-dot {
     position: absolute;
@@ -180,9 +178,11 @@
     height: 20px;
     border-radius: 50%;
     background: var(--zen-theme-picker-dot-color);
-    box-shadow: 0 0 0 2px var(--zen-themed-toolbar-bg);
+    @media (-prefers-color-scheme: dark) {
+      box-shadow: 0 0 0 2px rgba(0,0,0,.1);
+    }
     cursor: pointer;
-    border: 2px solid #fff;
+    border: 2px solid #ffffff;
     animation: zen-theme-picker-dot-animation 0.5s;
     transition: transform 0.2s;
     transform: translate(-50%, -50%);
@@ -230,13 +230,18 @@
     padding: 0.4rem !important;
     min-width: fit-content !important;
     transition: background 0.2s;
-    gap: 0.3rem;
+    appearance: none;
+
+    & .button-box {
+      gap: 0.1rem;
+    }
+
     &:not(#PanelUI-zen-gradient-generator-color-toggle-algo) .button-text {
       display: none;
     }
-    appearance: none;
+
     &:hover {
-      background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+      background: light-dark(#cfcfcf, #313131);
     }
 
     &[disabled] {
diff --git a/src/browser/base/zen-components/ZenGradientGenerator.mjs b/src/browser/base/zen-components/ZenGradientGenerator.mjs
index 0a8992017..ecf160e34 100644
--- a/src/browser/base/zen-components/ZenGradientGenerator.mjs
+++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs
@@ -1,7 +1,6 @@
 {
   class ZenThemePicker extends ZenMultiWindowFeature {
     static GRADIENT_IMAGE_URL = 'chrome://browser/content/zen-images/gradient.png';
-    static GRADIENT_DISPLAY_URL = 'chrome://browser/content/zen-images/gradient-display.png';
     static MAX_DOTS = 3;
 
     currentOpacity = 0.5;
@@ -90,11 +89,54 @@
 
       // Call the rest of the initialization
       this.initContextMenu();
+      this.initPredefinedColors();
 
       this._hasInitialized = true;
       this.onDarkModeChange(null);
     }
 
+    initPredefinedColors() {
+      document.getElementById('PanelUI-zen-gradient-generator-predefined').addEventListener('click', async (event) => {
+        const target = event.target;
+        const rawPosition = target.getAttribute('data-position');
+        if (!rawPosition) {
+          return;
+        }
+        const algo = target.getAttribute('data-algo');
+        const numDots = parseInt(target.getAttribute('data-num-dots'));
+        if (algo == 'float') {
+          for (const dot of this.dots) {
+            dot.element.remove();
+          }
+          this.dots = [];
+        }
+        // Generate new gradient from the single color given
+        const [x, y] = rawPosition.split(',').map((pos) => parseInt(pos));
+        let dots = [
+          {
+            ID: 0,
+            position: { x, y },
+          },
+        ];
+        for (let i = 1; i < numDots; i++) {
+          dots.push({
+            ID: i,
+            position: { x: 0, y: 0 },
+          });
+        }
+        this.useAlgo = algo;
+        dots = this.calculateCompliments(dots, 'update', this.useAlgo);
+        if (algo == 'float') {
+          for (const dot of dots) {
+            this.spawnDot(dot.position);
+          }
+          this.dots[0].element.classList.add('primary');
+        }
+        this.handleColorPositions(dots);
+        this.updateCurrentWorkspace();
+      });
+    }
+
     initCustomColorInput() {
       this.customColorInput.addEventListener('keydown', this.onCustomColorKeydown.bind(this));
     }
@@ -113,7 +155,6 @@
       this._onDotMouseUp = this.onDotMouseUp.bind(this);
       this._onDotMouseDown = this.onDotMouseDown.bind(this);
       this._onThemePickerClick = this.onThemePickerClick.bind(this);
-      themePicker.style.setProperty('--zen-theme-picker-gradient-image', `url(${ZenThemePicker.GRADIENT_DISPLAY_URL})`);
       document.addEventListener('mousemove', this._onDotMouseMove);
       document.addEventListener('mouseup', this._onDotMouseUp);
       themePicker.addEventListener('mousedown', this._onDotMouseDown);
@@ -350,7 +391,7 @@
 
       this.useAlgo = harmonyAngles.type;
 
-      if (!harmonyAngles || harmonyAngles.angles.length === 0) return [];
+      if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots;
 
       let primaryDot = dots.find((dot) => dot.ID === 0);
       if (!primaryDot) return [];
@@ -391,8 +432,6 @@
           dot.element.style.zIndex = 999;
 
           let pixelX, pixelY;
-          const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
-
           if (dot.position.x === null) {
             const leftPercentage = parseFloat(dot.element.style.left) / 100;
             const topPercentage = parseFloat(dot.element.style.top) / 100;