diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.cljs b/frontend/src/app/main/ui/ds/utilities/swatch.cljs
index 2ac26b6d94..83d732a9a7 100644
--- a/frontend/src/app/main/ui/ds/utilities/swatch.cljs
+++ b/frontend/src/app/main/ui/ds/utilities/swatch.cljs
@@ -93,6 +93,8 @@
         image          (:image background)
         format         (if id? "rounded" "square")
         element-id     (mf/use-id)
+        has-opacity?  (and (some? (:color background))
+                           (< (:opacity background) 1))
         on-click
         (mf/use-fn
          (mf/deps background on-click)
@@ -124,18 +126,20 @@
      [:> element-type props
       (cond
         (some? gradient-type)
-        [:span {:class (stl/css :swatch-gradient)
-                :style {:background-image (str (uc/gradient->css gradient-data) ", repeating-conic-gradient(lightgray 0% 25%, white 0% 50%)")}}]
+        [:div {:class (stl/css :swatch-gradient)
+               :style {:background-image (str (uc/gradient->css gradient-data) ", repeating-conic-gradient(lightgray 0% 25%, white 0% 50%)")}}]
 
         (some? image)
         (let [uri (cfg/resolve-file-media image)]
-          [:span {:class (stl/css :swatch-image)
-                  :style {:background-image (str/ffmt "url(%)" uri)}}])
+          [:div {:class (stl/css :swatch-image)
+                 :style {:background-image (str/ffmt "url(%)" uri)}}])
         has-errors
-        [:span {:class (stl/css :swatch-error)}]
+        [:div {:class (stl/css :swatch-error)}]
         :else
-        [:span {:class (stl/css :swatch-opacity)}
-         [:span {:class (stl/css :swatch-solid-side)
-                 :style {:background (uc/color->background (assoc background :opacity 1))}}]
-         [:span {:class (stl/css :swatch-opacity-side)
-                 :style {"--solid-color-overlay" (str (uc/color->background background))}}]])]]))
+        [:div {:class (stl/css :swatch-opacity)}
+         [:div {:class (stl/css :swatch-solid-side)
+                :style {:background (uc/color->background (assoc background :opacity 1))}}]
+         [:div {:class (stl/css-case :swatch-opacity-side true
+                                     :swatch-opacity-side-transparency has-opacity?
+                                     :swatch-opacity-side-solid-color (not has-opacity?))
+                :style {"--solid-color-overlay" (str (uc/color->background background))}}]])]]))
diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.scss b/frontend/src/app/main/ui/ds/utilities/swatch.scss
index 41ad55da54..1d76272587 100644
--- a/frontend/src/app/main/ui/ds/utilities/swatch.scss
+++ b/frontend/src/app/main/ui/ds/utilities/swatch.scss
@@ -105,10 +105,11 @@
 }
 
 .swatch-opacity {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto;
 }
 
-.swatch-opacity-side {
+.swatch-opacity-side-transparency {
   background-image:
   /* solid‑colour overlay */
   /* checkerboard pattern */
@@ -117,6 +118,12 @@
   background-size: cover, var(--checkerboard-size);
   background-position: center, center;
   background-repeat: no-repeat, repeat;
+  clip-path: inset(0 0 0 0 round 0 #{$br-4} #{$br-4} 0);
+}
+
+.swatch-opacity-side-solid-color {
+  background: var(--solid-color-overlay);
+  background-size: cover;
 }
 
 .swatch-solid-side,