diff --git a/engine/src/tools/Cursor.js b/engine/src/tools/Cursor.js
index 7114df12..a555fdf9 100644
--- a/engine/src/tools/Cursor.js
+++ b/engine/src/tools/Cursor.js
@@ -341,6 +341,12 @@ Wick.Tools.Cursor = class extends Wick.Tool {
 	_getCursor() {
 		if (!this.hitResult.item) {
 			return this.CURSOR_DEFAULT;
+		} else if (
+			(this.hitResult.item.data.parentItem
+				&& this.hitResult.item.data.parentItem.data.handleType === 'gradient-stop')
+			|| this.hitResult.item.data.handleType === 'gradient-point'
+		) {
+			return this.CURSOR_GRAD;
 		} else if (this.hitResult.item.data.isSelectionBoxGUI) {
 			// Don't show any custom cursor if the mouse is over the border, the border does nothing
 			if (this.hitResult.item.name === 'border') {
diff --git a/src/Editor/Util/ColorPicker/ColorPicker.jsx b/src/Editor/Util/ColorPicker/ColorPicker.jsx
index 28a5303a..9cb30d0e 100644
--- a/src/Editor/Util/ColorPicker/ColorPicker.jsx
+++ b/src/Editor/Util/ColorPicker/ColorPicker.jsx
@@ -87,29 +87,8 @@ export default function ColorPicker (props) {
     setLastObjects(props.selectedObjects);
 
     // Close pop-up if selection changed
-    if (open) toggle();
-  }
-
-  let color = props.color ? props.color : new window.Wick.Color("#FFFFFF")
-  let colorCSS = color;
-  let colorCSSOpaque = color;
-  if (color instanceof window.paper.Color) {
-    if (color.gradient) {
-      const sortedControlStops = color.gradient.stops.toSorted((objectA, objectB) => objectA.offset - objectB.offset);
-
-      colorCSS = 'linear-gradient(to right';
-      colorCSSOpaque = 'linear-gradient(to right';
-      sortedControlStops.forEach(paperControlStop => {
-          colorCSS += `, ${paperControlStop.color.toCSS()} ${paperControlStop.offset * 100}%`;
-          let { red, green, blue } = paperControlStop.color;
-          colorCSSOpaque += `, rgb(${red*256},${green*256},${blue*256}) ${paperControlStop.offset * 100}%`;
-      });
-      colorCSS += ')';
-      colorCSSOpaque += ')';
-    }
-    else {
-      colorCSS = color.toCSS();
-    }
+    if (open)
+      toggle();
   }
   let itemID = props.id;
   let popoverID = itemID+'-popover';
@@ -119,6 +98,7 @@ export default function ColorPicker (props) {
       setTimeout(selectPopover, 200);
     }
     if (!e || !data || !open) {
+      // Either `toggle()` was used, or no mouse-down data was needed
       setOpen(!open);
       return;
     }
@@ -127,17 +107,37 @@ export default function ColorPicker (props) {
     // Don't close if clicked on selected objects
     let clickedCanvas = (e.touches ? e.target : data.downTarget) === props.targetCanvas;
     let selectionUnchanged = arraysEqual(props.selectedObjects, lastObjects);
-    if (!data.clickedPopover && !(clickedCanvas && selectionUnchanged)) {
-      setOpen(false)
-    }
+    if (!data.clickedPopover && !(clickedCanvas && selectionUnchanged))
+      setOpen(false);
   }
 
   function selectPopover () {
     let ele = document.getElementById(popoverID);
-    if (ele) {
+    if (ele)
       ele.focus();
+  }
+
+  let color = props.color ? props.color : new window.Wick.Color("#FFFFFF")
+  let colorCSS = color;
+  let colorCSSOpaque = color;
+  if (color instanceof window.paper.Color) {
+    if (color.gradient) {
+      colorCSS = colorCSSOpaque = 'linear-gradient(to right';
+
+      const sortedControlStops = color.gradient.stops.toSorted((objectA, objectB) => objectA.offset - objectB.offset);
+      sortedControlStops.forEach(paperControlStop => {
+          colorCSS += `, ${paperControlStop.color.toCSS()} ${paperControlStop.offset * 100}%`;
+          let { red, green, blue } = paperControlStop.color;
+          colorCSSOpaque += `, rgb(${red*256},${green*256},${blue*256}) ${paperControlStop.offset * 100}%`;
+      });
+      colorCSS += ')';
+      colorCSSOpaque += ')';
     }
+    else
+      colorCSS = color.toCSS();
   }
+  // Bring desynced color state up, so if the solid-gradient state updates, the pop-up position updates
+  const [desyncedColor, setDesyncedColor] = useState(color);
 
   return (
       <button
@@ -171,6 +171,8 @@ export default function ColorPicker (props) {
               enableGradient={props.enableGradient}
 
               color={color}
+              desyncedColor={desyncedColor}
+              onDesyncedChange={setDesyncedColor}
               onChangeComplete={props.onChangeComplete}
               onChangeIntermediate={props.onChangeIntermediate}
 
diff --git a/src/Editor/Util/ColorPicker/ColorPickerComponents/WickGradient.jsx b/src/Editor/Util/ColorPicker/ColorPickerComponents/WickGradient.jsx
index 4d1d4694..87d2d7b8 100644
--- a/src/Editor/Util/ColorPicker/ColorPickerComponents/WickGradient.jsx
+++ b/src/Editor/Util/ColorPicker/ColorPickerComponents/WickGradient.jsx
@@ -111,10 +111,12 @@ class WickGradient extends Component {
     }
     renderGradientInfo () {
         // Normalize the gradient endpoints to the selection bounds
-        let originX = (this.origin.x - this.props.bounds.left) / this.props.bounds.width;
-        let originY = (this.origin.y - this.props.bounds.top) / this.props.bounds.height;
-        let destinationX = (this.destination.x - this.props.bounds.left) / this.props.bounds.width;
-        let destinationY = (this.destination.y - this.props.bounds.top) / this.props.bounds.height;
+        let originX = (this.origin.x - this.props.bounds.left) / this.props.bounds.width,
+            originY = (this.origin.y - this.props.bounds.top) / this.props.bounds.height,
+            destinationX = (this.destination.x - this.props.bounds.left) / this.props.bounds.width,
+            destinationY = (this.destination.y - this.props.bounds.top) / this.props.bounds.height;
+        let selectedStop = this.controlStops[this.props.selectedControlStopIndex],
+            offset = selectedStop ? selectedStop.offset : 0;
         return (
             <div className="wick-color-picker-gradient-fields">
                 <div className="wick-color-picker-gradient-fields-row">
@@ -145,7 +147,9 @@ class WickGradient extends Component {
                     <ColorPickerInput className="wick-color-picker-gradient-field wick-color-picker-field-stop-offset"
                         labelBefore="Offset"
                         type="numeric"
-                        value={this.controlStops[this.props.selectedControlStopIndex].offset}
+                        value={offset}
+                        min={0}
+                        max={1}
                         onChange={offset => {
                             this.offsetSelectedStop(offset);
                             this.onChangeComplete();
diff --git a/src/Editor/Util/ColorPicker/ColorPickerComponents/_colorpickercomponents.scss b/src/Editor/Util/ColorPicker/ColorPickerComponents/_colorpickercomponents.scss
index 415cf355..9d497158 100644
--- a/src/Editor/Util/ColorPicker/ColorPickerComponents/_colorpickercomponents.scss
+++ b/src/Editor/Util/ColorPicker/ColorPickerComponents/_colorpickercomponents.scss
@@ -106,6 +106,7 @@ $color-picker-pointer-radius: 8px;
     font-weight: bold;
     display: flex;
     align-items: center;
+    margin-bottom: 0;
 }
 .wick-color-picker-fields .wick-color-picker-input-label {
     flex-direction: column;
diff --git a/src/Editor/Util/ColorPicker/ColorPickerComponents/_wickgradient.scss b/src/Editor/Util/ColorPicker/ColorPickerComponents/_wickgradient.scss
index c27bb644..f4929544 100644
--- a/src/Editor/Util/ColorPicker/ColorPickerComponents/_wickgradient.scss
+++ b/src/Editor/Util/ColorPicker/ColorPickerComponents/_wickgradient.scss
@@ -24,4 +24,7 @@
         gap: 7px;
         margin: 0;
     }
+}
+.wick-color-picker-gradient-fields-row > * {
+    flex: 1;
 }
\ No newline at end of file
diff --git a/src/Editor/Util/ColorPicker/WickColorPicker.jsx b/src/Editor/Util/ColorPicker/WickColorPicker.jsx
index 36647748..2d075794 100644
--- a/src/Editor/Util/ColorPicker/WickColorPicker.jsx
+++ b/src/Editor/Util/ColorPicker/WickColorPicker.jsx
@@ -5,21 +5,24 @@ import ActionButton from 'Editor/Util/ActionButton/ActionButton';
 import './_wickcolorpicker.scss';
 import WickGradient from 'Editor/Util/ColorPicker/ColorPickerComponents/WickGradient';
 import WickSpectrum from 'Editor/Util/ColorPicker/ColorPickerComponents/WickSpectrum';
-import tinycolor from 'tinycolor2';
 
 class WickGradientColorPicker extends Component {
     constructor (props) {
         super(props);
 
         this.state = {
-            colorOnDrag: null,
-            outOfSyncColor: this.props.color
+            colorOnDrag: null
         };
         this.editLastColors = false;
         // Used to preserve color when switching solid/gradient
         this.lastReceivedColor = null;
         this.outOfSync = false;
     }
+    componentWillUnmount () {
+        this.outOfSync = false;
+        this.props.onDesyncedChange(this.props.color);
+    }
+
     onChangeIntermediate = (color) => {
         this.props.onChangeIntermediate && this.props.onChangeIntermediate(color);
         this.setState({ colorOnDrag: color });
@@ -60,7 +63,7 @@ class WickGradientColorPicker extends Component {
     switchSolid = (color) => {
         // Exit if color isn't a gradient
         if (!color.stops) return;
-        this.setState({ outOfSyncColor: color.stops[0].color });
+        this.props.onDesyncedChange(color.stops[0].color);
         this.outOfSync = true;
     }
     switchGradient = (color) => {
@@ -69,30 +72,22 @@ class WickGradientColorPicker extends Component {
         if (this.props.color.stops || (this.props.color.gradient && this.props.color.gradient.stops)) {
             // If props.color is already a gradient, use that color
             this.outOfSync = false;
-            this.setState({ outOfSyncColor: this.props.color });
+            this.props.onDesyncedChange(this.props.color);
             return;
         }
-        // Figma's default behavior
-        let colorObject = tinycolor(color);
-        let firstStop = colorObject.toRgbString();
-        let secondStop = colorObject.toHsv();
-        secondStop.v = (secondStop.v < 50) ? (secondStop.v + 40) : (secondStop.v - 40);
-        secondStop = tinycolor(secondStop).toRgbString();
 
         let x = 0, topY = 0, bottomY = 500;
         if (this.props.selectedObjectsBounds) {
-            x = this.props.selectedObjectsBounds.x;
+            x = this.props.selectedObjectsBounds.centerX;
             topY = this.props.selectedObjectsBounds.top;
             bottomY = this.props.selectedObjectsBounds.bottom;
         }
 
-        this.setState({
-            outOfSyncColor: {
-                origin: {x, y: topY},
-                destination: {x, y: bottomY},
-                stops: [{color: firstStop, offset: 0}, {color: secondStop, offset: 1}],
-                radial: false
-            }
+        this.props.onDesyncedChange({
+            origin: {x, y: topY},
+            destination: {x, y: bottomY},
+            stops: [{color, offset: 0}, {color, offset: 1}],
+            radial: false
         });
         this.outOfSync = true;
     }
@@ -126,7 +121,7 @@ class WickGradientColorPicker extends Component {
     renderGradientHeader (color) {
         return (
             <>
-                <div>{/* className="wick-color-picker-action-button">*/}
+                <div>
                     <ActionButton
                         color="tool"
                         id="color-picker-solid-button"
@@ -134,7 +129,7 @@ class WickGradientColorPicker extends Component {
                         isActive={ () => !color.stops }
                         text="Solid" />
                 </div>
-                <div>{/* className="wick-color-picker-action-button spacer">*/}
+                <div>
                     <ActionButton
                         color="tool"
                         id="color-picker-gradient-button"
@@ -187,7 +182,7 @@ class WickGradientColorPicker extends Component {
             this.lastReceivedColor = this.props.color;
             this.outOfSync = false;
         }
-        let color = this.outOfSync ? this.state.outOfSyncColor : this.props.color;
+        let color = this.outOfSync ? this.props.desyncedColor : this.props.color;
         let index = 0;
         if (this.state.colorOnDrag !== null) {
             color = this.state.colorOnDrag;
diff --git a/src/Editor/Util/ColorPicker/_wickcolorpicker.scss b/src/Editor/Util/ColorPicker/_wickcolorpicker.scss
index f517fd7f..3cb807c3 100644
--- a/src/Editor/Util/ColorPicker/_wickcolorpicker.scss
+++ b/src/Editor/Util/ColorPicker/_wickcolorpicker.scss
@@ -32,18 +32,13 @@ $color-picker-block-margin: 5px;
     margin-left: auto;
 }
 
-// Style color picker inputs like the inspector.
-.wick-color-picker input {
-    font-size: 1rem;
-}
-
-.wick-color-picker span {
-    padding-bottom: 0px !important;
-    color: $editor-primary-property-text !important;
-}
-
 .wick-color-picker-header {
     height: $color-picker-bar-height;
     display: flex;
     align-items: stretch;
+}
+
+// Style color picker inputs like the inspector.
+.wick-color-picker span {
+    color: $editor-primary-property-text;
 }
\ No newline at end of file
diff --git a/src/Editor/Util/WickInput/WickInput.jsx b/src/Editor/Util/WickInput/WickInput.jsx
index 10a281f0..8e765a49 100644
--- a/src/Editor/Util/WickInput/WickInput.jsx
+++ b/src/Editor/Util/WickInput/WickInput.jsx
@@ -138,11 +138,11 @@ class WickInput extends Component {
 
       val = parseFloat(val);
       // Constrain between min and max
-      if (min) {
+      if (typeof min === 'number') {
         val = Math.max(val, min);
       }
 
-      if (max) {
+      if (typeof max === 'number') {
         val = Math.min(val, max);
       }