diff --git a/editor/src/dispatcher.rs b/editor/src/dispatcher.rs
index 05d3a8e93e..976f931016 100644
--- a/editor/src/dispatcher.rs
+++ b/editor/src/dispatcher.rs
@@ -359,10 +359,15 @@ impl Dispatcher {
 	/// with a discriminant or the entire payload (depending on settings)
 	fn log_message(&self, message: &Message, queues: &[VecDeque<Message>], message_logging_verbosity: MessageLoggingVerbosity) {
 		let discriminant = MessageDiscriminant::from(message);
-		let is_blocked = DEBUG_MESSAGE_BLOCK_LIST.contains(&discriminant) || DEBUG_MESSAGE_ENDING_BLOCK_LIST.iter().any(|blocked_name| discriminant.local_name().ends_with(blocked_name));
-		let is_empty_batched = if let Message::Batched { messages } = message { messages.is_empty() } else { false };
+		let is_blocked =
+			|discriminant| DEBUG_MESSAGE_BLOCK_LIST.contains(&discriminant) || DEBUG_MESSAGE_ENDING_BLOCK_LIST.iter().any(|blocked_name| discriminant.local_name().ends_with(blocked_name));
+		let is_batch_all_blocked = if let Message::Batched { messages } = message {
+			messages.iter().all(|message| is_blocked(MessageDiscriminant::from(message)))
+		} else {
+			false
+		};
 
-		if !is_blocked && !is_empty_batched {
+		if !is_blocked(discriminant) && !is_batch_all_blocked {
 			match message_logging_verbosity {
 				MessageLoggingVerbosity::Off => {}
 				MessageLoggingVerbosity::Names => {
diff --git a/editor/src/messages/frontend/frontend_message.rs b/editor/src/messages/frontend/frontend_message.rs
index bf1535c9ad..2160834136 100644
--- a/editor/src/messages/frontend/frontend_message.rs
+++ b/editor/src/messages/frontend/frontend_message.rs
@@ -151,6 +151,11 @@ pub enum FrontendMessage {
 		#[serde(rename = "documentId")]
 		document_id: DocumentId,
 	},
+	UpdateGradientStopColorPickerPosition {
+		color: Color,
+		x: f64,
+		y: f64,
+	},
 	UpdateImportsExports {
 		/// If the primary import is not visible, then it is None.
 		imports: Vec<Option<FrontendGraphOutput>>,
diff --git a/editor/src/messages/tool/tool_messages/gradient_tool.rs b/editor/src/messages/tool/tool_messages/gradient_tool.rs
index 3b47651aa3..fc3bad458a 100644
--- a/editor/src/messages/tool/tool_messages/gradient_tool.rs
+++ b/editor/src/messages/tool/tool_messages/gradient_tool.rs
@@ -8,6 +8,7 @@ use crate::messages::portfolio::document::utility_types::document_metadata::Laye
 use crate::messages::tool::common_functionality::auto_panning::AutoPanning;
 use crate::messages::tool::common_functionality::graph_modification_utils::{NodeGraphLayer, get_gradient};
 use crate::messages::tool::common_functionality::snapping::{SnapCandidatePoint, SnapConstraint, SnapData, SnapManager, SnapTypeConfiguration};
+use graphene_std::raster::color::Color;
 use graphene_std::vector::style::{Fill, Gradient, GradientStops, GradientType};
 
 #[derive(Default, ExtractField)]
@@ -38,6 +39,10 @@ pub enum GradientToolMessage {
 	PointerMove { constrain_axis: Key, lock_angle: Key },
 	PointerOutsideViewport { constrain_axis: Key, lock_angle: Key },
 	PointerUp,
+	StartTransactionForColorStop,
+	CommitTransactionForColorStop,
+	CloseStopColorPicker,
+	UpdateStopColor { color: Color },
 	UpdateOptions { options: GradientOptionsUpdate },
 }
 
@@ -63,29 +68,59 @@ impl ToolMetadata for GradientTool {
 #[message_handler_data]
 impl<'a> MessageHandler<ToolMessage, &mut ToolActionMessageContext<'a>> for GradientTool {
 	fn process_message(&mut self, message: ToolMessage, responses: &mut VecDeque<Message>, context: &mut ToolActionMessageContext<'a>) {
-		let ToolMessage::Gradient(GradientToolMessage::UpdateOptions { options }) = message else {
-			self.fsm_state.process_event(message, &mut self.data, context, &self.options, responses, false);
-
-			let has_gradient = has_gradient_on_selected_layers(context.document);
-			if has_gradient != self.data.has_selected_gradient {
-				self.data.has_selected_gradient = has_gradient;
-				responses.add(ToolMessage::RefreshToolOptions);
+		match message {
+			ToolMessage::Gradient(GradientToolMessage::UpdateOptions { options }) => match options {
+				GradientOptionsUpdate::Type(gradient_type) => {
+					self.options.gradient_type = gradient_type;
+					apply_gradient_update(&mut self.data, context, responses, |g| g.gradient_type != gradient_type, |g| g.gradient_type = gradient_type);
+					responses.add(ToolMessage::UpdateHints);
+					responses.add(ToolMessage::UpdateCursor);
+				}
+				GradientOptionsUpdate::ReverseStops => {
+					apply_gradient_update(&mut self.data, context, responses, |_| true, |g| g.stops = g.stops.reversed());
+				}
+				GradientOptionsUpdate::ReverseDirection => {
+					apply_gradient_update(&mut self.data, context, responses, |_| true, |g| std::mem::swap(&mut g.start, &mut g.end));
+				}
+			},
+			ToolMessage::Gradient(GradientToolMessage::StartTransactionForColorStop) => {
+				if self.data.color_picker_transaction_open {
+					responses.add(DocumentMessage::EndTransaction);
+				}
+				responses.add(DocumentMessage::StartTransaction);
+				self.data.color_picker_transaction_open = true;
 			}
-
-			return;
-		};
-		match options {
-			GradientOptionsUpdate::Type(gradient_type) => {
-				self.options.gradient_type = gradient_type;
-				apply_gradient_update(&mut self.data, context, responses, |g| g.gradient_type != gradient_type, |g| g.gradient_type = gradient_type);
-				responses.add(ToolMessage::UpdateHints);
-				responses.add(ToolMessage::UpdateCursor);
+			ToolMessage::Gradient(GradientToolMessage::CommitTransactionForColorStop) => {
+				if self.data.color_picker_transaction_open {
+					responses.add(DocumentMessage::EndTransaction);
+					self.data.color_picker_transaction_open = false;
+				}
+			}
+			ToolMessage::Gradient(GradientToolMessage::UpdateStopColor { color }) => {
+				if let Some(stop_index) = self.data.color_picker_editing_color_stop
+					&& let Some(selected_gradient) = &mut self.data.selected_gradient
+					&& stop_index < selected_gradient.gradient.stops.color.len()
+				{
+					selected_gradient.gradient.stops.color[stop_index] = color;
+					selected_gradient.render_gradient(responses);
+					responses.add(PropertiesPanelMessage::Refresh);
+				}
 			}
-			GradientOptionsUpdate::ReverseStops => {
-				apply_gradient_update(&mut self.data, context, responses, |_| true, |g| g.stops = g.stops.reversed());
+			ToolMessage::Gradient(GradientToolMessage::CloseStopColorPicker) => {
+				if self.data.color_picker_transaction_open {
+					responses.add(DocumentMessage::EndTransaction);
+					self.data.color_picker_transaction_open = false;
+				}
+				self.data.color_picker_editing_color_stop = None;
 			}
-			GradientOptionsUpdate::ReverseDirection => {
-				apply_gradient_update(&mut self.data, context, responses, |_| true, |g| std::mem::swap(&mut g.start, &mut g.end));
+			_ => {
+				self.fsm_state.process_event(message, &mut self.data, context, &self.options, responses, false);
+
+				let has_gradient = has_gradient_on_selected_layers(context.document);
+				if has_gradient != self.data.has_selected_gradient {
+					self.data.has_selected_gradient = has_gradient;
+					responses.add(ToolMessage::RefreshToolOptions);
+				}
 			}
 		}
 	}
@@ -515,6 +550,8 @@ struct GradientToolData {
 	auto_pan_shift: DVec2,
 	gradient_angle: f64,
 	has_selected_gradient: bool,
+	color_picker_editing_color_stop: Option<usize>,
+	color_picker_transaction_open: bool,
 }
 
 impl Fsm for GradientToolFsmState {
@@ -723,9 +760,31 @@ impl Fsm for GradientToolFsmState {
 				let snap_data = SnapData::new(document, input, viewport);
 				tool_data.snap_manager.draw_overlays(snap_data, &mut overlay_context);
 
+				// Update color picker position if active (keeps it anchored to the stop during pan/zoom)
+				if let Some(stop_index) = tool_data.color_picker_editing_color_stop
+					&& let Some(selected_gradient) = tool_data.selected_gradient.as_ref()
+					&& let Some(layer) = selected_gradient.layer
+				{
+					let transform = gradient_space_transform(layer, document);
+					let gradient = &selected_gradient.gradient;
+					if stop_index < gradient.stops.position.len() {
+						let color = gradient.stops.color[stop_index].to_gamma_srgb();
+						let position = gradient.stops.position[stop_index];
+						let DVec2 { x, y } = transform.transform_point2(gradient.start.lerp(gradient.end, position));
+						responses.add(FrontendMessage::UpdateGradientStopColorPickerPosition { color, x, y });
+					}
+				}
+
 				self
 			}
 			(GradientToolFsmState::Ready { .. }, GradientToolMessage::SelectionChanged) => {
+				if tool_data.color_picker_editing_color_stop.is_some() {
+					if tool_data.color_picker_transaction_open {
+						responses.add(DocumentMessage::EndTransaction);
+						tool_data.color_picker_transaction_open = false;
+					}
+					tool_data.color_picker_editing_color_stop = None;
+				}
 				tool_data.selected_gradient = None;
 				GradientToolFsmState::Ready {
 					hovering: GradientHoverTarget::None,
@@ -737,11 +796,45 @@ impl Fsm for GradientToolFsmState {
 				let drag_start_viewport = document.metadata().document_to_viewport.transform_point2(tool_data.drag_start);
 				if input.mouse.position.distance(drag_start_viewport) <= DRAG_THRESHOLD
 					&& let Some(selected_gradient) = &mut tool_data.selected_gradient
-					&& let GradientDragTarget::Midpoint(index) = selected_gradient.dragging
 				{
-					selected_gradient.gradient.stops.midpoint[index] = 0.5;
-					selected_gradient.render_gradient(responses);
-					responses.add(PropertiesPanelMessage::Refresh);
+					match selected_gradient.dragging {
+						GradientDragTarget::Midpoint(index) => {
+							selected_gradient.gradient.stops.midpoint[index] = 0.5;
+							selected_gradient.render_gradient(responses);
+							responses.add(PropertiesPanelMessage::Refresh);
+						}
+						GradientDragTarget::Start | GradientDragTarget::End | GradientDragTarget::Stop(_) => {
+							// Find the stop index from the drag target
+							let stop_index = match selected_gradient.dragging {
+								GradientDragTarget::Stop(i) => Some(i),
+								GradientDragTarget::Start => selected_gradient.gradient.stops.position.iter().position(|&p| p.abs() < f64::EPSILON * 1000.),
+								GradientDragTarget::End => selected_gradient.gradient.stops.position.iter().position(|&p| (1. - p).abs() < f64::EPSILON * 1000.),
+								_ => None,
+							};
+							if let Some(stop_index) = stop_index
+								&& stop_index < selected_gradient.gradient.stops.color.len()
+							{
+								// Dismiss any existing color picker first
+								if tool_data.color_picker_editing_color_stop.is_some() && tool_data.color_picker_transaction_open {
+									responses.add(DocumentMessage::EndTransaction);
+									tool_data.color_picker_transaction_open = false;
+								}
+
+								let stop_pos = selected_gradient.gradient.stops.position[stop_index];
+								let viewport_pos = selected_gradient
+									.transform
+									.transform_point2(selected_gradient.gradient.start.lerp(selected_gradient.gradient.end, stop_pos));
+								let color = selected_gradient.gradient.stops.color[stop_index].to_gamma_srgb();
+								tool_data.color_picker_editing_color_stop = Some(stop_index);
+								responses.add(FrontendMessage::UpdateGradientStopColorPickerPosition {
+									color,
+									x: viewport_pos.x,
+									y: viewport_pos.y,
+								});
+							}
+						}
+						_ => {}
+					}
 				}
 				self
 			}
@@ -1178,15 +1271,21 @@ impl Fsm for GradientToolFsmState {
 				tool_data.selected_gradient = None;
 				responses.add(OverlaysMessage::Draw);
 
+				dismiss_color_stop_color_picker(tool_data, responses);
+
+				GradientToolFsmState::Ready {
+					hovering: GradientHoverTarget::None,
+					selected: GradientSelectedTarget::None,
+				}
+			}
+			(_, GradientToolMessage::Abort) => {
+				dismiss_color_stop_color_picker(tool_data, responses);
+
 				GradientToolFsmState::Ready {
 					hovering: GradientHoverTarget::None,
 					selected: GradientSelectedTarget::None,
 				}
 			}
-			(_, GradientToolMessage::Abort) => GradientToolFsmState::Ready {
-				hovering: GradientHoverTarget::None,
-				selected: GradientSelectedTarget::None,
-			},
 			_ => self,
 		}
 	}
@@ -1273,6 +1372,16 @@ impl Fsm for GradientToolFsmState {
 	}
 }
 
+fn dismiss_color_stop_color_picker(tool_data: &mut GradientToolData, responses: &mut VecDeque<Message>) {
+	if tool_data.color_picker_editing_color_stop.is_some() {
+		if tool_data.color_picker_transaction_open {
+			responses.add(DocumentMessage::EndTransaction);
+			tool_data.color_picker_transaction_open = false;
+		}
+		tool_data.color_picker_editing_color_stop = None;
+	}
+}
+
 fn detect_hover_target(mouse: DVec2, document: &DocumentMessageHandler) -> GradientHoverTarget {
 	let stop_tolerance = (MANIPULATOR_GROUP_MARKER_SIZE * 2.).powi(2);
 	let midpoint_tolerance = GRADIENT_MIDPOINT_DIAMOND_RADIUS.powi(2);
@@ -1380,7 +1489,7 @@ fn apply_gradient_update(
 	}
 
 	if transaction_started {
-		responses.add(DocumentMessage::AddTransaction);
+		responses.add(DocumentMessage::EndTransaction);
 	}
 	if let Some(selected_gradient) = &mut data.selected_gradient
 		&& let Some(layer) = selected_gradient.layer
diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte
index 91caa98b2b..a9b6972fc3 100644
--- a/frontend/src/components/floating-menus/ColorPicker.svelte
+++ b/frontend/src/components/floating-menus/ColorPicker.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onDestroy, createEventDispatcher } from "svelte";
+	import { getContext, onDestroy, createEventDispatcher, tick } from "svelte";
 
 	import type { HSV, RGB, FillChoice, MenuDirection } from "@graphite/messages";
 	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages";
@@ -40,7 +40,7 @@
 		["Magenta", "#ff00ff", "#696969"],
 	];
 
-	const dispatch = createEventDispatcher<{ colorOrGradient: FillChoice; startHistoryTransaction: undefined }>();
+	const dispatch = createEventDispatcher<{ colorOrGradient: FillChoice; startHistoryTransaction: undefined; commitHistoryTransaction: undefined }>();
 	const tooltip = getContext<TooltipState>("tooltip");
 
 	export let colorOrGradient: FillChoice;
@@ -109,10 +109,11 @@
 		return new Color({ h, s, v, a });
 	}
 
-	function watchOpen(open: boolean) {
+	async function watchOpen(open: boolean) {
 		if (open) {
 			setTimeout(() => hexCodeInputWidget?.focus(), 0);
-		} else {
+
+			await tick();
 			setOldHSVA(hue, saturation, value, alpha, isNone);
 		}
 	}
@@ -198,6 +199,7 @@
 	}
 
 	function onPointerUp() {
+		if (draggingPickerTrack) dispatch("commitHistoryTransaction");
 		removeEvents();
 	}
 
@@ -413,6 +415,10 @@
 		setOldHSVA(hsva.h, hsva.s, hsva.v, hsva.a, color.none);
 	}
 
+	export function div(): HTMLDivElement | undefined {
+		return self?.div();
+	}
+
 	onDestroy(() => {
 		removeEvents();
 	});
@@ -705,6 +711,7 @@
 
 <style lang="scss" global>
 	.color-picker {
+		--widget-height: 24px;
 		--picker-size: 256px;
 		--picker-circle-radius: 6px;
 
diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte
index 4c5f3ae919..04a26dcc5f 100644
--- a/frontend/src/components/layout/FloatingMenu.svelte
+++ b/frontend/src/components/layout/FloatingMenu.svelte
@@ -199,7 +199,8 @@
 		}
 
 		const inParentFloatingMenu = Boolean(floatingMenuContainer.closest("[data-floating-menu-content]"));
-		if (!inParentFloatingMenu) {
+		const noPosition = Boolean(floatingMenuContainer.closest("[data-floating-menu-no-position]"));
+		if (!inParentFloatingMenu && !noPosition) {
 			// Required to correctly position content when scrolled (it has a `position: fixed` to prevent clipping)
 			// We use `.style` on a div (instead of a style DOM attribute binding) because the binding causes the `afterUpdate()` hook to call the function we're in recursively forever
 			let tailOffset = 0;
@@ -322,7 +323,7 @@
 
 		// POINTER STRAY
 		// Close the floating menu if the pointer has strayed far enough from its bounds (and it's not hovering over its own spawner)
-		const notHoveringOverOwnSpawner = ownSpawner !== targetSpawner;
+		const notHoveringOverOwnSpawner = ownSpawner !== targetSpawner || (ownSpawner === undefined && targetSpawner === undefined);
 		if (strayCloses && notHoveringOverOwnSpawner && isPointerEventOutsideFloatingMenu(e, POINTER_STRAY_DISTANCE)) {
 			// TODO: Extend this rectangle bounds check to all submenu bounds up the DOM tree since currently submenus disappear
 			// TODO: with zero stray distance if the cursor is further than the stray distance from only the top-level menu
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index 98722c4d76..d8453997f8 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -3,8 +3,10 @@
 
 	import type { Editor } from "@graphite/editor";
 	import {
+		type MenuDirection,
 		type MouseCursorIcon,
 		type XY,
+		Color,
 		DisplayEditableTextbox,
 		DisplayEditableTextboxUpdateFontData,
 		DisplayEditableTextboxTransform,
@@ -14,6 +16,7 @@
 		UpdateDocumentRulers,
 		UpdateDocumentScrollbars,
 		UpdateEyedropperSamplingState,
+		UpdateGradientStopColorPickerPosition,
 		UpdateMouseCursor,
 		isWidgetSpanRow,
 	} from "@graphite/messages";
@@ -24,6 +27,7 @@
 	import { rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
 	import { setupViewportResizeObserver, cleanupViewportResizeObserver } from "@graphite/utility-functions/viewports";
 
+	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
 	import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@graphite/components/floating-menus/EyedropperPreview.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -35,6 +39,7 @@
 	let rulerHorizontal: RulerInput | undefined;
 	let rulerVertical: RulerInput | undefined;
 	let viewport: HTMLDivElement | undefined;
+	let gradientStopPicker: ColorPicker | undefined;
 
 	const editor = getContext<Editor>("editor");
 	const appWindow = getContext<AppWindowState>("appWindow");
@@ -75,6 +80,10 @@
 	let cursorEyedropperPreviewColorPrimary = "";
 	let cursorEyedropperPreviewColorSecondary = "";
 
+	// Gradient stop color picker
+	let gradientStopPickerColor: Color | undefined = undefined;
+	let gradientStopPickerPosition: { x: number; y: number } | undefined = undefined;
+
 	// Canvas dimensions
 	let canvasWidth: number | undefined = undefined;
 	let canvasHeight: number | undefined = undefined;
@@ -406,6 +415,19 @@
 		// which provides pixel-perfect physical dimensions via devicePixelContentBoxSize
 	}
 
+	function gradientStopPickerDirection(position: XY | undefined, viewport: HTMLDivElement | undefined): MenuDirection {
+		const picker = (gradientStopPicker?.div()?.querySelector("[data-floating-menu-content]") || undefined) as HTMLElement | undefined;
+		if (!picker || !position || !viewport) return "Bottom";
+
+		const roomRight = position.x + picker.offsetWidth - viewport.clientWidth;
+		const roomBelow = position.y + picker.offsetHeight - viewport.clientHeight;
+
+		// Prefer bottom if there's room
+		if (roomBelow <= 0) return "Bottom";
+		// Otherwise choose the direction with more room
+		return roomRight > roomBelow ? "Bottom" : "Right";
+	}
+
 	onMount(() => {
 		// Not compatible with Safari:
 		// <https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#browser_compatibility>
@@ -441,6 +463,12 @@
 			}
 		});
 
+		// Gradient stop color picker
+		editor.subscriptions.subscribeJsMessage(UpdateGradientStopColorPickerPosition, (data) => {
+			gradientStopPickerColor = data.color;
+			gradientStopPickerPosition = { x: data.x, y: data.y };
+		});
+
 		// Update scrollbars and rulers
 		editor.subscriptions.subscribeJsMessage(UpdateDocumentScrollbars, async (data) => {
 			await tick();
@@ -564,6 +592,34 @@
 							y={cursorTop}
 						/>
 					{/if}
+					<div
+						style:left={gradientStopPickerPosition ? `${gradientStopPickerPosition?.x}px` : undefined}
+						style:top={gradientStopPickerPosition ? `${gradientStopPickerPosition?.y}px` : undefined}
+						style:position="absolute"
+						data-floating-menu-no-position
+					>
+						<div data-floating-menu-spawner></div>
+						<ColorPicker
+							direction={gradientStopPickerDirection(gradientStopPickerPosition, viewport)}
+							open={Boolean(gradientStopPickerPosition && gradientStopPickerColor)}
+							on:open={({ detail }) => {
+								if (!detail) {
+									editor.handle.closeGradientStopColorPicker();
+									gradientStopPickerPosition = undefined;
+									gradientStopPickerColor = undefined;
+								}
+							}}
+							colorOrGradient={gradientStopPickerColor || new Color()}
+							on:colorOrGradient={({ detail }) => {
+								if (detail instanceof Color) {
+									editor.handle.updateGradientStopColor(detail.red, detail.green, detail.blue, detail.alpha);
+								}
+							}}
+							on:startHistoryTransaction={() => editor.handle.startGradientStopColorTransaction()}
+							on:commitHistoryTransaction={() => editor.handle.commitGradientStopColorTransaction()}
+							bind:this={gradientStopPicker}
+						/>
+					</div>
 					<div
 						class:viewport={!$appWindow.viewportHolePunch}
 						class:viewport-transparent={$appWindow.viewportHolePunch}
diff --git a/frontend/src/components/widgets/inputs/ColorInput.svelte b/frontend/src/components/widgets/inputs/ColorInput.svelte
index 261ae5e3da..3ead45caae 100644
--- a/frontend/src/components/widgets/inputs/ColorInput.svelte
+++ b/frontend/src/components/widgets/inputs/ColorInput.svelte
@@ -32,11 +32,7 @@
 </script>
 
 <LayoutCol class="color-button" classes={{ open, disabled, narrow, none, transparency, outlined, "direction-top": menuDirection === "Top" }} {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
-	<button style:--chosen-gradient={chosenGradient} style:--outline-amount={outlineFactor} on:click={() => (open = true)} tabindex="0" data-floating-menu-spawner>
-		<!-- {#if disabled && value instanceof Color && !value.none}
-			<TextLabel>sRGB</TextLabel>
-		{/if} -->
-	</button>
+	<button style:--chosen-gradient={chosenGradient} style:--outline-amount={outlineFactor} on:click={() => (open = true)} tabindex="0" data-floating-menu-spawner></button>
 	<ColorPicker
 		{open}
 		{disabled}
diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index 560bd90a40..49ced4d82e 100644
--- a/frontend/src/io-managers/input.ts
+++ b/frontend/src/io-managers/input.ts
@@ -179,7 +179,8 @@ export function createInputManager(editor: Editor, dialog: DialogState, portfoli
 		potentiallyRestoreCanvasFocus(e);
 
 		const { target } = e;
-		const isTargetingCanvas = target instanceof Element && target.closest("[data-viewport], [data-viewport-container], [data-node-graph]");
+		const inFloatingMenu = target instanceof Element && target.closest("[data-floating-menu-content]");
+		const isTargetingCanvas = !inFloatingMenu && target instanceof Element && target.closest("[data-viewport], [data-viewport-container], [data-node-graph]");
 		const inDialog = target instanceof Element && target.closest("[data-dialog] [data-floating-menu-content]");
 		const inContextMenu = target instanceof Element && target.closest("[data-context-menu]");
 		const inTextInput = target === textToolInteractiveInputElement;
diff --git a/frontend/src/messages.ts b/frontend/src/messages.ts
index e240283844..afa7903a54 100644
--- a/frontend/src/messages.ts
+++ b/frontend/src/messages.ts
@@ -828,6 +828,15 @@ export class DisplayEditableTextboxTransform extends JsMessage {
 
 export class DisplayRemoveEditableTextbox extends JsMessage {}
 
+export class UpdateGradientStopColorPickerPosition extends JsMessage {
+	@Type(() => Color)
+	readonly color!: Color;
+
+	readonly x!: number;
+
+	readonly y!: number;
+}
+
 export class UpdateDocumentLayerDetails extends JsMessage {
 	@Type(() => LayerPanelEntry)
 	readonly data!: LayerPanelEntry;
@@ -1713,6 +1722,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateEyedropperSamplingState,
 	UpdateFullscreen,
 	UpdateGraphFadeArtwork,
+	UpdateGradientStopColorPickerPosition,
 	UpdateGraphViewOverlay,
 	UpdateImportReorderIndex,
 	UpdateImportsExports,
diff --git a/frontend/wasm/src/editor_api.rs b/frontend/wasm/src/editor_api.rs
index e0353b1b65..0472a283ab 100644
--- a/frontend/wasm/src/editor_api.rs
+++ b/frontend/wasm/src/editor_api.rs
@@ -650,6 +650,34 @@ impl EditorHandle {
 		Ok(())
 	}
 
+	/// Update the color of the currently-edited gradient stop
+	#[wasm_bindgen(js_name = updateGradientStopColor)]
+	pub fn update_gradient_stop_color(&self, red: f32, green: f32, blue: f32, alpha: f32) -> Result<(), JsValue> {
+		let Some(color) = Color::from_rgbaf32(red, green, blue, alpha) else {
+			return Err(Error::new("Invalid color").into());
+		};
+		self.dispatch(GradientToolMessage::UpdateStopColor { color: color.to_linear_srgb() });
+		Ok(())
+	}
+
+	/// Start a new undo transaction for gradient stop color editing
+	#[wasm_bindgen(js_name = startGradientStopColorTransaction)]
+	pub fn start_gradient_stop_color_transaction(&self) {
+		self.dispatch(GradientToolMessage::StartTransactionForColorStop);
+	}
+
+	/// Commit the current gradient stop color transaction (called on pointer-up after each drag/click)
+	#[wasm_bindgen(js_name = commitGradientStopColorTransaction)]
+	pub fn commit_gradient_stop_color_transaction(&self) {
+		self.dispatch(GradientToolMessage::CommitTransactionForColorStop);
+	}
+
+	/// Close the gradient stop color picker and commit any pending transaction
+	#[wasm_bindgen(js_name = closeGradientStopColorPicker)]
+	pub fn close_gradient_stop_color_picker(&self) {
+		self.dispatch(GradientToolMessage::CloseStopColorPicker);
+	}
+
 	#[wasm_bindgen(js_name = clipLayer)]
 	pub fn clip_layer(&self, id: u64) {
 		let id = NodeId(id);