diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index 19c88a69..3128381f 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -5,6 +5,10 @@
     flex: 1 1 auto;
   }
 
+  .opt {
+    margin-right: 0.5em;
+  }
+
   &-field.input {
     display: inline-flex;
     flex: 0 0 0;
diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index fc8b3f4f..6795d393 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -103,6 +103,7 @@
         >
       </div>
       <ColorInput
+        v-if="!noColorControl"
         class="input-color-input"
         v-model="colorOverride"
         fallback="#606060"
@@ -128,19 +129,19 @@ export default {
     'previewStyle',
     'previewCss',
     'disabled',
-    'invalid'
+    'invalid',
+    'noColorControl'
   ],
   emits: ['update:shadow'],
   data () {
     return {
-      colorOverride: null,
+      colorOverride: undefined,
       lightGrid: false,
       zoom: 100
     }
   },
   computed: {
     style () {
-      console.log(this.previewStyle)
       const result = [
         this.previewStyle,
         `zoom: ${this.zoom / 100}`
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index 53fa0aac..74153db3 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -151,6 +151,7 @@
             :preview-css="previewCss"
             :disabled="!editedSubShadow && typeof editedShadow !== 'string'"
             :shadow="editedSubShadow"
+            :no-color-control="true"
             @update:shadow="({ axis, value }) => updateSubShadow(axis, value)"
           />
         </div>