diff --git a/frontend/playwright/ui/specs/colorpicker.spec.js b/frontend/playwright/ui/specs/colorpicker.spec.js
index ee9dbcd770..6625cb4b8a 100644
--- a/frontend/playwright/ui/specs/colorpicker.spec.js
+++ b/frontend/playwright/ui/specs/colorpicker.spec.js
@@ -144,15 +144,14 @@ test("Create a RADIAL gradient", async ({ page }) => {
   const gradOption = workspacePage.page.getByText("Gradient");
   await gradOption.click();
 
-  const gradTypeOptions = workspacePage.colorpicker
-    .locator("div")
-    .filter({ hasText: "Linear" })
-    .nth(3);
-  await gradTypeOptions.click();
+  const gradTypeSelect = workspacePage.colorpicker
+    .getByRole("combobox")
+    .filter({ hasText: "Linear" });
+  await gradTypeSelect.click();
 
-  const gradRadialOption = workspacePage.page
-    .locator("li")
-    .filter({ hasText: "Radial" });
+  const gradRadialOption = workspacePage.page.getByRole("option", {
+    name: "Radial",
+  });
   await gradRadialOption.click();
 
   const addStopBtn = workspacePage.page.getByRole("button", {
diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js
index 693d10ecff..d831b30a07 100644
--- a/frontend/playwright/ui/visual-specs/workspace.spec.js
+++ b/frontend/playwright/ui/visual-specs/workspace.spec.js
@@ -1249,3 +1249,58 @@ test.describe("Comments panel filter", () => {
     await expect(menu).toHaveScreenshot(shot);
   });
 });
+
+test.describe("Gradient type select", () => {
+  test("Shows the gradient type select closed, open and changed", async ({
+    page,
+  }) => {
+    const shot = { maxDiffPixelRatio: 0, threshold: 0 };
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json");
+    await workspace.goToWorkspace({
+      fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374",
+      pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375",
+    });
+    await workspace.clickLeafLayer("Rectangle");
+    await page.getByRole("button", { name: "#B1B2B5" }).click();
+    await page.getByText("Solid").click();
+    await page.getByText("Gradient").click();
+
+    const typeSelect = workspace.colorpicker
+      .getByRole("combobox")
+      .filter({ hasText: "Linear" });
+    await expect(typeSelect).toBeVisible();
+    const pickerBox = await workspace.colorpicker.boundingBox();
+    const selectBox = await typeSelect.boundingBox();
+    // The gradient bar above the select and room below it for the open list.
+    const clip = {
+      x: Math.floor(pickerBox.x),
+      y: Math.floor(selectBox.y) - 60,
+      width: Math.ceil(pickerBox.width),
+      height: 200,
+    };
+    await page.mouse.move(0, 0);
+    await expect(page).toHaveScreenshot({ clip, ...shot });
+
+    await typeSelect.hover();
+    await expect(page).toHaveScreenshot({ clip, ...shot });
+
+    await typeSelect.click();
+    const radial = page.getByRole("option", { name: "Radial" });
+    await expect(radial).toBeVisible();
+    await page.mouse.move(0, 0);
+    await expect(page).toHaveScreenshot({ clip, ...shot });
+
+    await radial.click();
+    await expect(
+      workspace.colorpicker.getByRole("combobox").filter({ hasText: "Radial" }),
+    ).toBeVisible();
+    await page.mouse.move(0, 0);
+    await expect(page).toHaveScreenshot({ clip, ...shot });
+
+    // The whole gradient panel: preview bar, stops and the stop list.
+    const panel = workspace.colorpicker.locator("[class*='gradient-panel']");
+    await expect(panel).toHaveScreenshot(shot);
+  });
+});
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
index 8338544f73..e1817621c6 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
@@ -15,8 +15,8 @@
    [app.main.features :as features]
    [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.reorder-handler :refer [reorder-handler*]]
-   [app.main.ui.components.select :refer [select]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.select :refer [select*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.formats :as fmt]
    [app.main.ui.hooks :as h]
@@ -167,6 +167,10 @@
        :on-focus handle-focus-stop-color
        :on-blur handle-blur-stop-color}]]))
 
+(def ^:private gradient-type-options
+  [{:id "linear-gradient" :label "Linear"}
+   {:id "radial-gradient" :label "Radial"}])
+
 (mf/defc gradients*
   [{:keys [type
            stops
@@ -200,9 +204,9 @@
         handle-change-type
         (mf/use-callback
          (mf/deps on-change-type)
-         (fn [event]
+         (fn [type-id]
            (when on-change-type
-             (on-change-type event))))
+             (on-change-type (keyword type-id)))))
 
         handle-add-stop
         (mf/use-callback
@@ -336,12 +340,10 @@
                  :style {"--position" (dm/str (* offset 100) "%")}}]])]]
 
      [:div {:class (stl/css :gradient-options)}
-      [:& select
-       {:default-value type
-        :options [{:value :linear-gradient :label "Linear"}
-                  {:value :radial-gradient :label "Radial"}]
-        :on-change handle-change-type
-        :class (stl/css :gradient-options-select)}]
+      [:> select* {:default-selected (d/name (d/nilv type :linear-gradient))
+                   :options gradient-type-options
+                   :on-change handle-change-type
+                   :wrapper-class (stl/css :gradient-options-select)}]
 
       [:div {:class (stl/css :gradient-options-buttons)}
        [:> icon-button* {:variant "ghost"
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
index 0ce4019fd4..038e326ea4 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
@@ -4,18 +4,24 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
+// Only for %input-element: the stop offset input moves to the DS with the
+// numeric inputs group.
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/typography.scss" as *;
 
 .gradient-panel {
-  margin-top: deprecated.$s-12;
+  margin-block-start: var(--sp-m);
   display: grid;
-  gap: deprecated.$s-4;
-  grid-template-rows: deprecated.$s-56 deprecated.$s-32 1fr;
+  gap: var(--sp-xs);
+  grid-template-rows: px2rem(56) $sz-32 1fr;
 }
 
 .gradient-preview {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   display: flex;
   align-items: center;
   position: relative;
@@ -23,19 +29,19 @@
 }
 
 .gradient-background {
-  width: 100%;
-  height: deprecated.$s-20;
-  border-radius: deprecated.$br-4;
+  inline-size: 100%;
+  block-size: px2rem(20);
+  border-radius: $br-4;
   position: relative;
   cursor: pointer;
 }
 
 .gradient-preview-stop-wrapper {
   position: absolute;
-  width: calc(100% - deprecated.$s-24 - deprecated.$s-4);
-  height: 100%;
-  left: deprecated.$s-2;
-  top: calc(-1 * deprecated.$s-4);
+  inline-size: calc(100% - #{px2rem(28)});
+  block-size: 100%;
+  inset-inline-start: px2rem(2);
+  inset-block-start: calc(-1 * var(--sp-xs));
   pointer-events: none;
 }
 
@@ -43,47 +49,47 @@
   background-color: var(--color-foreground-primary);
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=");
   background-position: left center;
-  background-size: deprecated.$s-8;
-  border-radius: deprecated.$br-6;
-  border: deprecated.$s-2 solid var(--color-foreground-primary);
-  box-shadow: 0 0 deprecated.$s-4 0 var(--menu-shadow-color);
-  height: calc(deprecated.$s-24 - deprecated.$s-2);
-  left: var(--position);
+  background-size: px2rem(8);
+  border-radius: $br-6;
+  border: $b-2 solid var(--color-foreground-primary);
+  box-shadow: 0 0 px2rem(4) 0 var(--color-shadow-dark);
+  block-size: px2rem(22);
+  inset-inline-start: var(--position);
   overflow: hidden;
   pointer-events: initial;
   position: absolute;
-  width: calc(deprecated.$s-24 - deprecated.$s-2);
+  inline-size: px2rem(22);
 
   &.is-selected,
   &:hover {
-    outline: deprecated.$s-2 solid var(--color-accent-primary);
+    outline: $b-2 solid var(--color-accent-primary);
   }
 }
 
 .gradient-preview-stop-decoration {
   background: var(--color-foreground-primary);
   border-radius: 100%;
-  bottom: deprecated.$s-32;
-  box-shadow: 0 0 deprecated.$s-4 0 var(--menu-shadow-color);
-  height: deprecated.$s-4;
-  left: calc(var(--position) + deprecated.$s-8);
+  inset-block-end: var(--sp-xxxl);
+  box-shadow: 0 0 px2rem(4) 0 var(--color-shadow-dark);
+  block-size: px2rem(4);
+  inset-inline-start: calc(var(--position) + var(--sp-s));
   position: absolute;
-  width: deprecated.$s-4;
+  inline-size: px2rem(4);
 }
 
 .gradient-preview-stop-color {
   position: absolute;
-  left: 0;
-  width: 50%;
-  height: 100%;
+  inset-inline-start: 0;
+  inline-size: 50%;
+  block-size: 100%;
   background: var(--color-solid);
 }
 
 .gradient-preview-stop-alpha {
   position: absolute;
-  left: 50%;
-  width: 50%;
-  height: 100%;
+  inset-inline-start: 50%;
+  inline-size: 50%;
+  block-size: 100%;
   background: var(--color-alpha);
 }
 
@@ -98,7 +104,7 @@
 }
 
 .gradient-options-select {
-  width: deprecated.$s-140;
+  inline-size: px2rem(140);
 }
 
 .rotate-icon {
@@ -108,18 +114,18 @@
 .gradient-stops-list {
   display: flex;
   flex-direction: column;
-  gap: deprecated.$s-4;
-  max-height: deprecated.$s-180;
+  gap: var(--sp-xs);
+  max-block-size: px2rem(180);
   overflow: hidden auto;
   padding: 0 0 var(--sp-s) var(--sp-m);
 }
 
 .gradient-stops-entry {
   display: flex;
-  gap: deprecated.$s-4;
-  padding: deprecated.$s-2;
-  border-radius: deprecated.$br-12;
-  border: deprecated.$s-1 solid transparent;
+  gap: var(--sp-xs);
+  padding: var(--sp-xxs);
+  border-radius: $br-12;
+  border: $b-1 solid transparent;
   position: relative;
 
   &.is-selected {
@@ -141,26 +147,26 @@
 
 .offset-input-wrapper {
   @extend %input-element;
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
-  width: deprecated.$s-92;
+  inline-size: px2rem(92);
 }
 
 .gradient-separator {
   border-color: var(--color-background-quaternary);
-  border-width: deprecated.$s-3;
-  margin-left: calc(var(--sp-m) / 2);
+  border-width: px2rem(3);
+  margin-inline-start: calc(var(--sp-m) / 2);
   position: relative;
-  width: calc(100% - var(--sp-m));
+  inline-size: calc(100% - var(--sp-m));
 }
 
 .gradient-preview-stop-preview {
   background: var(--color-foreground-primary);
   border-radius: 50%;
-  height: deprecated.$s-4;
-  left: calc(var(--preview-position, 0%) - deprecated.$s-2);
+  block-size: px2rem(4);
+  inset-inline-start: calc(var(--preview-position, 0%) - #{px2rem(2)});
   pointer-events: none;
   position: absolute;
-  top: calc(50% - deprecated.$s-2);
-  width: deprecated.$s-4;
+  inset-block-start: calc(50% - #{px2rem(2)});
+  inline-size: px2rem(4);
 }